vuex的模块化

345 阅读1分钟

1 vuex是在开发vue中是比较常用的,vuex的模块化,我们可以在store文件下创建一个modules文件 在这个文件夹下创建不同的模块

  namespaced: true,//在模块开发下 我们需要开启命名空间
  state: {
    name: [{names:'魏世豪'}]
  },
  actions: {},
  mutations: {},
  getters: {}
}
export default couns2  //导出

2.创建的模块需要再index.js里面引入

import Vue from 'vue'
import Vuex from 'vuex'
import couns from './coun'
import couns2 from './coun2'
Vue.use(Vuex)
//导出
export default new Vuex.Store({
  modules: {
    couns,
    couns2
  }
})

3.在组件进行使用的时候 我们可以使用 mapState, mapMutations, mapActions,mapGetters 对vuex中的数据进行处理 mapState, mapMutations, mapActions,mapGetters的写法有对象和数组两种写法 针对模块化的写法 他们第一个参数为该模块的名字

 computed: {
    ...mapState('couns', ['sum', 'school']),
    ...mapState('couns2', ['name']),
    ...mapGetters('couns',['dahe'])
  },
  mounted() {
    console.log(this.$store);
  },
  methods: {
    ...mapMutations('couns', { increment: 'jia', decrement: 'jian' }),
    ...mapActions('couns', { incrementOdd: 'jiaOdd', incrementWait: 'jianWait' })
  }