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 }
  },

 在頁面中調用某一模塊的actions里的方法：

mounted() {
    this.$store.dispatch("test1/ayncTest")
  },

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

 

 

 

 

 

 

。