Vuex常用模块化使用方案
程序员文章站
2024-03-12 17:25:50
...
Vue中进行数据的统一状态管理,无疑Vuex是最好的选择。那么我又不想把所有的state全扔到一个文件里面进行管理,而是要进行友好的拆分,模块化管理。
Vuex的官网上当然介绍了module(模块化分割)的使用,下面简要概述项目中使用vuex的常见模块管理。
目录结构:
--store
--moduleA
--types.js
--mutations.js
--actions.js
--moduleB
--types.js
--mutations.js
--actions.js
--store.js
由外及内来实现一下
1.vue的main.js导入store,全局可用this.$store
javascript 代码
import store from './store/store';
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
2.store.js具体实现一个store
javascript 代码
import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from './moduleA/mutations';
import moduleB from './moduleB/mutations';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
});
3.moduleA的具体代码
1) types.js
javascript 代码
export const CHANGE_COUNTA = 'CHANGE_COUNTA';
2) actions.js
javascript 代码
import * as types from './types';
export default {
changeCountA({commit}, num) {
commit(types.CHANGE_COUNTA, num);
}
}
3) mutations.js
javascript 代码
import {
CHANGE_COUNTA
} from './types'
import actions from './actions';
const state = {
countA: 0
}
const mutations = {
[CHANGE_COUNTA](state, num) {
state.countA = num;
}
}
const getters = {
getCountA(state) {
return state.countA;
}
}
export default {
state,
mutations,
getters,
actions
}
moduleB同样如此
4.view层组件使用
html 代码
<template>
{{this.getCountA}}
<button @click="handleDisplach">click</button>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
data () {
return {
}
},
computed: {
...mapGetters([
'getCountA'
])
},
methods: {
handleDisplach() {
console.log(this.$store);
this.$store.dispatch('changeCountA', 1);
}
}
}
</script>
5.还有其他的辅助函数具体见官网