因为在大多数的项目中,我们对于全局状态的管理并不仅仅一种情况的需求,有时有多方面的需求,比如写一个商城项目,你所用到的全局state可能是关于购物车这一块儿的也有可能是关于商品价格这一块儿的;像这样的情况我们就要考虑使用vuex中的 modules 模块化了,具体怎么使用modules呢?咱们继续一步一步的走:
首先,在store文件夹下面新建一个modules文件夹,然后在modules文件里面建立需要管理状态的js文件,既然要把不同部分的状态分开管理,那就要把它们给分成独立的状态文件了,如下图:
而对应的store文件夹下面的index.js 里面的内容就直接改写成:
import Vue from 'vue';
import Vuex from 'vuex';
import footerStatus from './modules/footerStatus'
import collection from './modules/collection'
Vue.use(Vuex);
export default new Vuex.Store({
modules:{
footerStatus,
collection
}
});
相应的js,其中的 namespaced:true 表示当你需要在别的文件里面使用( mapGetters、mapActions 接下来会说 )时,里面的方法需要注明来自哪一个模块的方法:
//collection.js
const state = {
collects: [], //初始化一个collects数组
}
const getters = {
renderCollects (state) {//承载变化的collects
return state.collects
}
}
const mutations = {
pushCollects (state,items) {
//如何变化collects 插入items
state.collects.push(items)
}
}
const actions = {
involePushItems (context,item) {
//触发mutations里面的pushCollects,传入数据形参item 对应到items
context.commit('pushCollects',item)
}
}
export default {
namespaced: true,// 用于在全局引用此文件里的方法时标识这一个的文件名
state,
getters,
mutations,
actions