Nuxt使用Vuex

创建好nuxt项目后会有一个store文件，创建一个idnex.js就可以使用vuex了，不需要安装vuex。

接下来对于vuex具体的使用，这里只是一个小demo,如果不符合公司规定，可修改。。

一. 在vuex的基础写法

下面第一张图片的demo在vue项目可使用 ---------但是在Nuxt中不行，第二张图片是Nuxt的正确

在Nuxt项目中正确写法如下：

如果报错了，就将index.js 重命名其它的名称比如pubulish.js 再试一下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const state = () => ({
    searchContent: '',
});
const mutations = {
    changeSearchContent(state, option) {
        console.log(option)
        state.searchContent = option
        console.log(state.searchContent)
    },
};
export default {
    state,
    mutations
};

二. .vue文件中使用vuex

先引入

在methods中注册

在一个方法里面可直接this.使用

三部曲-----简易版小模板–在mutations中传值

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['changeSearchContent']),
    clickSearch() {
      this.changeSearchContent(this.search)
    },
  },
}
</script>

这.vue文件获取state的值，同样是三部，引入，注册，使用。直接上代码

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['searchContent']),
  },
  mounted(){
      console.log(this.searchContent)
  }

}
</script>

如果还是没会可以进行评论

嗯 就酱~~