Vue modules

import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import getters from './getters'
import a from './module/a'
Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions: {
    


  },
  getters,
  modules:{
    a,
  }
})

倉庫裏分其他模塊module,模塊中也包含state,mutation,action,getters這四個部分

模塊中的mutation,action,getters是註冊在全局vuex中,只有模塊中的state是私有的

state訪問代碼會繁瑣一點 $this.$store.state.moduleName.Name,module模塊是放在vue state中的,可以通過vue-tool看到

其他三個部分跟平時使用的方法一樣,mapGetters放到computer中;mapMutations,mapActions放到methods中映射

<script>
import comheader from "../../components/Header";
import {mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    name:'search',
    components: { comheader },
    computed:{
        ...mapGetters(['ModolueGetterName'])
    },
    methods: {
        ...mapMutations(['ModolieMutationName']),
        ...mapActions(['ModolieActionName'])
    },
}
</script>

如果你想要模塊modules中私有化的話,需要將在modules 中增加

 namespaced: true,

 那在組件中映射map這樣寫

<script>
import comheader from "../../components/Header";
import {mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    name:'search',
    components: { comheader },
    computed:{
        ...mapGetters('a',['ModolueGetterName'])
    },
    methods: {
        ...mapMutations('a',['ModolieMutationName']),
        ...mapActions('a',['ModolieActionName'])
    },
}
</script>
//a 爲模塊名

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章