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>

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

嗯 就酱~~