vue——store全局存储
2024-09-01 14:37:54
业务场景:刷新页面时,首次拉取所有配置,存储到store状态管理用于全局调用;
import Vue from 'vue'
import Vuex from 'vuex'
import userInfo from './modules/user'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
userInfo, // 用户信息:读取方式this.$store.state.userInfo.xxxx.xx
},
state: { // 初始状态或更新后的状态,读取方式:this.$store.state.businessInfo.id;
businessInfo: {// 业务信息:省去了一层中间参数
cname: '',
ename: '',
id: ''
}
},
mutations: { // 更新状态内容:this.$store.commit('GET_CREDID_INFO', businessInfo);
GET_BUSINESS_INFO (state, newInfo) {
state.businessInfo = newInfo
}
},
actions: { //触发状态更新,当需要更新多个状态的时候使用,如this.$store.dispatch('getBusinessInfo', newInfo);
getBusinesInfo({ commit, state }, newInfo) {
// commit('GET_USER_INFO', newInfo.userInfo)
commit('GET_BUSINESS_INFO',newInfo.businessInfo)
}
}
})
为避免状态命名重复,使用modules进行管理:
const state = {// 全局参数的初始状态
credid: '', // 应用管理:配置、发布的credid
data: null // 是否返回应用(特征)管理首页
} const mutations = { // 更新全局状态
SET_APP_CREDID (state, val) {
state.credid = val
},
SET_APP_MANAGE (state, val) {
state.data = val
}
}
const actions = { // 可以不设置触发动作
setAppManage ({ commit }, val) {
commit('SET_APP_MANAGE', val)
}
} export default {
state,
mutations,
actions
}
最新文章
- IOCTL函数用法
- CMDB反思4
- solr默认查询设置
- visual studio 2013 c++ 打开code map 功能
- Ubuntu系统下常用的新建、删除、拷贝文件命令
- Dp解决数组中连续子数组的最大和
- C#/vbscript/JS如何加密保护HTML/javascript源代码
- UITabBarController 笔记(二) ViewController中加UITabBarController
- MAMP:在 OSX 中搭建 Apache, MySQL, PHP 环境并本地安装、调试 WordPress
- uva 11991 - Easy Problem from Rujia Liu?(STL)
- python端口扫描用多线程+线程安全的队列+Thread类实现
- 微信小程序--家庭记账本开发--01
- C++类的描述
- 关于微信小程序使用canvas生成图片,内容图片跨域的问题
- django中使用mysql数据库的事务
- Prometheus Node_exporter 之 Memory Detail Meminfo /proc/meminfo
- Tomcat------启动出错
- ios开发之--使用AFN上传3.1.0上传视频,不走成功回调原因及解决方法
- linux 安装Swagger(swagger-editor , swagger-ui)
- alpha阶段总结 (第一阶段冲刺成果)