对vuex分模块管理
为什么要分模块:
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter(模块大的话可以把 state、mutation、action、getter拆分成独立的文件)。
案例
src/store/card/index.js (子模块)
方式一:state、mutation、action、getter统一写在index.js
const card = {
/**
* 定义命名空间,防止多个模块同名共享,使用时需要带上命名空间
*/
namespaced: true,
state: {
cardArr: [],
},
mutations: {
addCard(state, obj){
state.cardArr.push(obj);
}
},
actions: {
addCardFun(store, obj){
store.commit('addCard', obj);
}
}
}
//导出
export default card;
方式二:state、mutation、action、getter拆分成独立的文件
src/store/card/state.js
export default {
cardArr: []
}
src/store/card/mutations.js
export default {
addCard(state, obj){
state.cardArr.push(obj);
}
}
src/store/card/actions.js
export default {
addCardFun(store, obj){
store.commit('addCard', obj);
}
}
src/store/card/index.js (子模块)
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
src/store/index.js(在总的store中中配置vuex)
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import card from './card'
//构造store
const store = new Vuex.Store({
// 模块化
modules: {
card: card
}
});
export default store;
在card.vue中使用store里的数据
<template>
<div>
显示卡列表:<button @click="onAdd">追加卡信息</button>
<ul>
<li v-for="(result, index) in cardArr" :key="index">
卡号:{{result.no}} <br>
昵称:{{result.name}}
</li>
</ul>
</div>
</template>
<script>
// 导入state、mapMutations、actions
import { mapState, mapMutations, actions } from 'vuex';
export default {
data(){
return {
}
},
computed:{
// 映射带有命名空间的state,第一个参数模块名
...mapState('card', [
cardArr: state => state.cardArr
])
},
methods: {
// 映射带有命名空间的mutations,第一个参数模块名
...mapMutations('card' ,[
'addCard',
]),
// 映射带有命名空间的actions,第一个参数模块名
...mapActions('card', [
'addCardFun'
])
onAdd(){
...
//this.$store.commit('card/addCard', data);
this.addCard(data);
// 通过actions调用
//this.$store.dispatch('card/addCardFun', data)
this.addCardFun(data);
}
}
}
</script>