vuex之module-模块组（六）

骑猪看日落 2022-10-02 06:52 66阅读 0赞

当应用非常复杂，状态非常多的时候，需要将store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块，从上至下进行同样方式的分割。

#### 1、大致的结构 ####

// 模块Aconst moduleA = {
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... }}// 模块Bconst moduleB = {
      state: { ... },
      mutations: { ... },
      actions: { ... }}// 组装const store = new Vuex.Store({
      modules: {
        a: moduleA,
        b: moduleB  }})// 取值store.state.a // -> moduleA 的状态store.state.b // -> moduleB 的状态

#### 2、详细示例 ####

实际开发中建议把module分开编写。  
（1）src/vuex/module1.js

// 模块1const module1 = {
        // 初始化状态
        state: {
            module1: {
                name: '模块1'
            }
        },
        // 编写动作
        mutations: {
            CHANGE1 (state, data) {
                state.module1 = data;
            }
        },
        // 取值
        getters: {
            module1: function(state){
                return state.module1;
            }
        },
        // 创建驱动，可异步
        actions: {
            change1 ({commit}, data) {
                commit('CHANGE1', data)
            }
        }}export default module1;

（2）src/vuex/module2.js

// 模块1const module2 = {
        // 初始化状态
        state: {
            module2: {
                name: '模块2'
            }
        },
        // 编写动作
        mutations: {
            CHANGE2 (state, data) {
                state.module2 = data;
            }
        },
        // 取值
        getters: {
            module2: function(state){
                return state.module2;
            }
        },
        // 创建驱动，可异步
        actions: {
            change2 ({commit}, data) {
                commit('CHANGE2', data)
            }
        }}export default module2;

（3）src/vuex/store.js

// 引入vueimport Vue from 'vue'// 引入vueximport Vuex from 'vuex'// 引入module1import module1 from '@/vuex/module1'// 引入module2import module2 from '@/vuex/module2'// 使用vuexVue.use(Vuex)// 模块注入const store = new Vuex.Store({
        modules: {
            a: module1,
            b: module2    }})// 输出storeexport default store;

（4）组件中使用，src/compontent/one.vue

<template>
        <div id="app">
            
            <h2>{
         { module1.name }}</h2>
            <button @click="change1({'name': 'change1'})">module1改变</button>
    
            
            <h2>{
         { module2.name }}</h2>
            <button @click="change2({'name': 'change2'})">module2改变</button>
        </div></template><script>// 引入快捷方法import {mapState, mapGetters, mapActions} from 'vuex'export default {
        name: 'app',
        data () {
            return {
            }
        },
        computed:{
            // mapState取值
            // ...mapState({
            //     module1: state => state.a.module1.name,
            //     module2: state => state.b.module2.name
            // })
    
            // mapGetter取值
            ...mapGetters(['module1', 'module2'])
        },
        methods: {
            // mapAction取方法
            ...mapActions([
                'change1',
                'change2'
            ])
        }}</script><style></style>

PS：module中命名要唯一，不然获取值和改变值的时候会冲突，目前亲测mapGetters只能获取对象。

转载于:https://blog.51cto.com/4547985/2390830