简单实用:首先创建一个 Vuex store仓库,并定义状态state(比如存用户信息userInfo,多次使用的数据)、mutations 和 actions。如下所示:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
userInfo: null, // 存储的数据
},
mutations: {
SET_MY_DATA(state, data) {
state.userInfo= data; // 更新状态
},
},
actions: {
saveData({ commit }, data) {
commit('SET_MY_DATA', data); // 提交 mutation 更新状态
},
},
});
export default store;
// index.js
但是当我们是多个模块使用,比如人员信息,任务信息,设置信息等,可以将状态,mutations、actions 和 getters抽离到模块 modules
当中去。modules
的作用是将 store 分割成多个模块,以便更好地组织和管理状态、mutations、actions 和 getters。使用模块化的方式可以使 大型应用 的状态管理更加清晰和可维护。
1、创建modules
文件夹,把需要管理的模块都写入此文件夹,2创建一个index.js文件暴漏仓库
3,通过require.context实现所有模块集体化。我们可以通过 require.context() 函数来创建自己的 context。
此函数有三个参数:要搜索的目录,标记表示是否还搜索其子目录,匹配文件的正则表达式。
webpack 会在构建中解析代码中的 require.context() 。
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import tagsView from './modules/tagsView' //新增
import persist from "@/store/persist";
Vue.use(Vuex)
// 筛选modules 文件夹中所有的以.js 结尾的文件
const modulesFiles = require.context('./modules', false, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') // 如'./app.js' => 'app'
const value = modulesFiles(modulePath) // 打印结果如图
// 根据文件名 把对应文件暴漏出来的内容如:state、 mutations,actions return出去
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters,
tagsView, //新增
plugins: [persist.plugin],
})
export default store
// index.js
以任务模块文件举例:在 task.js 中暴漏定义的各个state、mutations、actions等,在获取数据接口的页面通过d
// 任务模块
const state: {
userInfo: null,
},
const mutations: {
SET_USER_INFO(state, userInfo) {
state.userInfo = userInfo;
},
},
const actions: {
fetchUserInfo({ commit },userInfo) {
// 假设从 API 获取用户信息
commit('SET_USER_INFO', userInfo);
},
},
export default {
namespaced: true,
state,
mutations,
actions,
}
在组件中存储数据
<template>
<div>
<button @click="storeData">存储数据</button>
</div>
</template>
<script>
export default {
data() {
return {
userInfo: {}, // 组件内部的数据
};
},
methods: {
storeData() {
// ./task/fetchUserInfo task:模块名 fetchUserInfo:action 定义的方法名
this.$store.dispatch('./task/fetchUserInfo', this.userInfo); // 调用 action 存储数据
},
},
};
</script>
3. 访问存储的数据(有多种方式)
<template>
<div>
<p>存储的数据: {{ this.$store.state.userInfo.name}}</p>
</div>
</template>
export default {
create(){
// 获取数据
this.$store.dispatch("task/fetchUserInfo");
// 传递值 获取结果
this.$store
.dispatch("task/fetchUserInfo", this.taskInfo.taskId)
.then((res) => {
this.evolveValue = res;
});
}
};
<script>
</script>