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