nuxt中vuex如何模块化分

最近在学习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的模块划分，

在页面中尝试了一下调用方式，是否和传统的一样：

首先引入：

import { mapGetters,mapState } from "vuex";

在计算属性中

computed: {
    ...mapGetters([
      "test1State",//页面配置信息
      "test2State"//
    ]),
  },

然后在页面中就可以随意使用test1State、test2State变量了，

当然不通过mapGetters也是可以获取到每个模块中的值的，

如果不借用mapGetters，那么自然没必要在页面中引入vuex了，可以把那一句去掉了。

还是在计算属性中，可以这样写：

computed: {
    ...mapGetters([
      "test1State", //页面配置信息
    ]),
    test2State(){
      return this.$store.state.test2.test2State
    }
  },

好了，以上就是nuxt的vuex模块划分。

。

nuxt中vuex如何模块化分

猜你喜欢