欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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.还有其他的辅助函数具体见官网

相关标签: vue vuex