对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>