vue 状态管理器（store）

2022-03-29 14:35:51 阅读：217 来源： 互联网

标签：vue 管理器 getters modules js state firstStore 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;
      },
    },
  },

标签：vue,管理器,getters,modules,js,state,firstStore,store
来源： https://www.cnblogs.com/beheTea/p/16020997.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue 状态管理器（store）