最近在学习nuxt框架，学到了vuex这一块，nuxt将vuex内置了，所以在模块划分时和vue的spa项目略有区别。
照着官网例子写了一下，感觉少了什么？大名鼎鼎的getters模块哪了，于是自己尝试了几次，终于把getters模块整出来了。话不多说，上例子
store文件的目录结构
可以看到store文件夹下有三个文件，nuxt将store下的每个js文件当成一个modules去构建，不必有传统的index.js因为store目录下的每一个js文件，nuxt都会把它当成模块。
下面来看看test1.js也就是test1模块
export const state=()=>({ test1State:"test1State" }) export const mutations={ settest1State(state,val){ state.test1State=val; } } export const actions={ ayncTest(context){ context.commit(settest1State,"asynctest1") } }
可以看到，和传统的代码格式略有不同，state都是一个函数的形式暴露出来的，而且每个模块只暴露出state、mutations、actions三个模块，唯独不暴露getters模块，因为getters模块需要单独一个文件暴露
出来。
再看一下test2.js也就是test2模块
export const state=()=>({ test2State:"test2State" }) export const mutations={ settest2State(state,val){ state.test2State=val; } } export const actions={ ayncTest(context){ context.commit(settest2State,"asynctest2") } }
和test1一样一样的，以后在nuxt中划分vuex模块就这样划分即可
在来看看getters.js模块，这个比较特殊：
const getters ={ test1State:state=> state.test1.test1State, test2State:state=>state.test2.test2State } export default getters;
以上就是nuxt中vuex的模块划分，
在页面中尝试了一下调用方式，是否和传统的一样：
首先引入：
computed: { ...mapGetters([ "test1State",//页面配置信息 "test2State"// ]), },
然后在页面中就可以随意使用test1State、test2State变量了，
当然不通过mapGetters也是可以获取到每个模块中的值的，
如果不借用mapGetters，那么自然没必要在页面中引入vuex了，可以把那一句去掉了。
还是在计算属性中，可以这样写：
computed: { ...mapGetters([ "test1State", //页面配置信息 ]), test2State(){ return this.$store.state.test2.test2State } },
在页面中调用某一模块的actions里的方法：
mounted() { this.$store.dispatch("test1/ayncTest") },
好了，以上就是nuxt的vuex模块划分。
。
原文：https://www.cnblogs.com/fqh123/p/12819633.html