Vuex Modules模块化的基本操作

下面是Vuex的目录结构

Vuex的state类似就是存储数据的地方，如果项目数据结构复杂，vuex的数据全都写在同一个state中难以维护。所以模块化开发将其按照一个一个的模块划分，每个模块都有自己的state，mutations，actions 在export default暴露出去导入到store/index.js统一再暴露出去

//import导入文件部分省略
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    car
  },
  getters
})

export default store

car.js文件

const state = {
  carName: '马自达',
  productionAddress: '河南'   //未导入到getters中
}

const mutations = {
  SET_CARNAME(state, data) {
    state.carName = data;
  },
  SET_PRODUCTIONADDRESS(state, data) {
    state.productionAddress = data;
  }
}

const actions = {
  change_carName({
    commit
  }, data) {
    commit("SET_CARNAME", data)
  },
  change_productionAddress({
    commit
  }, data) {
    commit("SET_PRODUCTIONADDRESS", data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

getters.js

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  roles: state => state.user.roles,
  carName: state => state.car.carName  //导入到getters中
}
export default getters

同理，可以根据自己项目的实际需求去模块化划分生成不同模块的.js文件
下面是具体的使用方法

1.常规 非模块下vuex使用

this.$stroe.state.carName
this.$store.commit('SET_CARNAME','宝马')
this.$store.dispatch('change_carName','奥迪')
//辅助函数
import {mapState, mapMutations, mapActions, mapGetters} from "vuex"
computed:{
	...mapState({
		count:state=>state.count   //键自定义名称
	}),
	...mapGetters({
		changeState:'changeState' //键可自定义名字
	})
}
methods:{
	...mapMutations({
		muCountAdd:'muCountAdd'
	}),
	...mapActions({
		acCountAdd:'acCountAdd'
	})
}

state和getters因为要响应式，需要在页面的computed中使用辅助函数。
mutations和actions需要在methods中去使用辅助函数

2.模块下的vuex使用

this.$store.state.car.carName  //获取car模块的state中carName值
this.$store.commit('car/SET_CARNAME','宝马')   //调用mutation的SET_CARNAME
this.$store.dispatch('car/change_carName','奥迪')  //调用actions的change_carName

//或者mapGetters辅助函数
import { mapGetters,mapState } from 'vuex'
computed: {
    ...mapGetters(['carName']),  //直接拿到getters中的carName，在页面中可以直接使用
    ...mapState({ productionAddress: (state) => state.car.productionAddress }),
  },

main.js入口文件

import store from './store'
//Vue.use(Vuex) 这一步在store.js中已经导入了
new Vue({
  el: '#app',
  router,
  store,   //ES6键值相同的简写 
  render: h => h(App)
})