Vuex--module

原文网址：Vuex--module(模块化)--使用/教程/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

本文用示例介绍Vuex的五大核心之一：module。

官网

Module | Vuex

API 参考 | Vuex

module概述

说明

        由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用非常复杂时，store 对象可能变得相当臃肿。

        为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块（从上至下进行同样方式的分割）。

同名问题

如果不使用命名空间，且顶层的store和子store有同名项，结果如下：

同名项	访问方式	访问结果
state	this.$store.state.xxx	访问到的是顶层的。
mutations	this.$store.commit('xxx')	先执行顶层，后执行所有子module。
getters	this.$store.getters.xxx;	访问页面先报错（不影响运行）：[vuex] duplicate getter key: xxx 访问到的是顶层的。
actions	this.$store.dispatch('xxx')	访问到的是顶层的。

用法

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
 
const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
 
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

示例

        创建两个模块：Counter.js（计数器模块）、UserInfo.js（用户信息模块），使用CommonStore.js将这两个模块注册到Vuex。

代码结构：

公共代码

Counter.js（计数器模块）

const counter = {
    namespaced: true,

    // 这里的 state 对象是模块的局部状态
    state: {
        count: 10,
        info: 'This is counter'
    },

    getters: {
        doubleCount(state) {
            return state.count * 2;
        }
    },

    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        }
    },

    actions: {
        asyncIncrement(context) {
            console.log('CounterStore=> action: asyncIncrement');
            setTimeout(() => {
                context.commit('increment')
            }, 1000)
        },
    }
}
export default counter;

UserInfo.js

const userInfo = {
    namespaced: true,
    state: {
        userName: '',
        authorization: ''
    },
    mutations: {
        writeUserName(state, name) {
            // 这里的 `state` 对象是模块的局部状态
            state.userName = name;
        },
        writeAuthorization(state, auth) {
            // 这里的 `state` 对象是模块的局部状态
            state.authorization = auth;
        },
    }
}
export default userInfo;

Parent.vue（入口组件）

路由（router/index.js）

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
    }
  ],
})

写法1：基础写法

代码

ComponentA.vue（写数据）

ComponentB.vue

测试

访问：http://localhost:8080/#/parent

写法2：map写法

代码

ComponentA.vue（写数据）

ComponentB.vue（读数据） 

测试

访问： http://localhost:8080/#/parent

写法3：map+Helper

        createNamespacedHelpers 是命名空间辅助函数，用来规定辅助函数的路径。它可以用来控制只使用某个模块。

        本处测试只引入计数器（Counter.js）模块。

代码

ComponentA.vue（写数据）

ComponentB.vue（读数据） 

测试

访问：http://localhost:8080/#/parent

其他网址

VueX mapGetters 获取 Modules 中的Getters_静已思之愈浓的博客-CSDN博客

Vue状态管理vuex - 小火柴的蓝色理想 - 博客园