其他分享
首页 > 其他分享> > vue 状态管理器(store)

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

 

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