vue 状态管理器（store）

(想到啥写啥.jpg)

1、目录结构

store
|-- getters.js
|-- index.js
|-- modules
    |-- firstStore.js

使用过程中：

（1）确认项目中存在 store 目录，若不存在，则自己创建一个。

（2）按照图示目录结构在store 目录中创建文件。

index.js 文件代码几乎不变，所以直接粘贴复制即可，代码如下：

import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
Vue.use(Vuex);
//通过正则表达式获取modules文件夹下的所有js文件
const modulesFiles = require.context("./modules", true, /\.js$/);

//动态配置vuex.store的核心代码-start
//遍历模块文件,将所有的单个模块,汇总成符合vuex规范的modules.
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});
//动态配置vuex.store的核心代码-end

//vues.store统一配置modules
const store = new Vuex.Store({
  modules,
  getters,
});
export default store;

getters.js 注册modules目录中的模块文件。

const getters = {
  firstStore: (state) => state.firstStore,
  xx:state = > state.xx
};
export default getters;

modules 文件内存放分割的多个模块（module） 当前测试项目中只有一个  firstStore 文件，其模块文件构成：

export default {
// 因为是模块化动态配置的store，避免模块件不同模块命名冲突的问题，故使用 namespaced:true，
// 调用方法 this.$store.dispatch("模块名/调用方法",所传数据)。例：this.$store.dispatch("firstStore/changeNum",param)
  namespaced: true,
  // 存放数据的数据源
  state: {
    Number: "",
  },
  // 用来更改state中数据源的方法；
  mutations: {
    CHANGE_NUM: (state, parm) => {
      state.Number = parm;
    },
  },
  // actions 提交的是 mutation，通过mutation改变state中的数据。
  // actions 可以包含任意异步操作
  actions: {
    changeNum(context, parm) {
      context.commit("CHANGE_NUM", parm);
    },
  },
};

 （3）将数据存储到状态管理器中。

this.$store.dispatch("firstStore/changeNum", 数据);（“模块名/方法名”，数据）

 （4）监听数据

data() {
    return {
      StoreANum: 0,
      CountNum: 0,
      StoreNum: this.$store.getters.firstStore,
    };
  },
  watch: {
    "StoreNum.Number": {
      handler(newValue) {
        this.StoreANum = newValue;
      },
    },
  },