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;
      },
    },
  },