vue——store全局存储
业务场景:刷新页面时,首次拉取所有配置,存储到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
}
vue——store全局存储的更多相关文章
- vue学习过程总结(06) - vue的数据存储store
这个不知道能怎么叫不?现在对这块很迷.以下为个人理解 store是状态管理,是一个对象,有其属性和方法. 常见的值有:state/mutations/actions/getters, 这几个值的意思: ...
- vue store存储commit和dispatch
vue store存储commit和dispatch this.$store.commit('toShowLoginDialog', true);this.$store.dispatch('toSho ...
- vue项目持久化存储数据的实现代码
方式一.使用localStorage在数据存储 1.要在浏览器刷新的时候重新存储起来 if (window.localStorage.getItem(authToken)) { store.commi ...
- vue 定义全局函数,监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- 生命周期函数以及vue的全局注册
beforeCreate 在创造实例之前 created 创造实例以后 beforeMount 在挂载前 render 渲染节点到页面上 //将虚拟dom数组渲染出来 mounted 挂载以后 bef ...
- vue入门全局配置
全局配置 Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列属性: silent 类型:boolean 默认值:false 用法: Vue.config.silen ...
- Vue中全局导入和按需导入的区别
export {router} //按需导出 import {router} from './router' //按需导入路由模块 export default //全局导出store模块 store ...
- vue 自定义全局方法
import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...
- 黑马vue---28、vue中全局过滤器的基本使用
黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...
随机推荐
- [Scikit-learn] 1.1 Generalized Linear Models - from Linear Regression to L1&L2
Introduction 一.Scikit-learning 广义线性模型 From: http://sklearn.lzjqsdd.com/modules/linear_model.html#ord ...
- SpringCloud学习成长之路 六 cloud配置中心
一.简介 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组件spring cloud config ...
- python基础之面向对象(二)
一点提醒 首先在使用pickle读取load时,需要先把使用到的类import上,否则会报错.在pycharm中使用时不会报错,但在linux或者cmd时就会报错!必须import. 报错提示: Fi ...
- mysql正则替换某个字段值里面的某个字符串
sql语句如下: UPDATE `ccvms_video` SET title=REPLACE(title, "最", "相对") WHERE title LI ...
- C#线程 BeginInvoke和EndInvoke使用方法
一.C#线程概述 在操作系统中一个进程至少要包含一个线程,然后,在某些时候需要在同一个进程中同时执行多项任务,或是为了提供程序的性能,将要执行的任务分解成多个子任务执行.这就需要在同一个进程中开启多个 ...
- iOS面试-assign与retain
assign 对基础数据类型 (NSInteger,CGFloat)和C数据类型(int, float, double, char)等等. 此标记说明设置器直接进行赋值,这也是默认值.在 ...
- springmvc+mybatis多数据源配置,AOP注解动态切换数据源
springmvc与springboot没多大区别,springboot一个jar包配置几乎包含了所有springmvc,也不需要繁琐的xml配置,springmvc需要配置多种jar包,需要繁琐的x ...
- C/C++.控制台输入(cin/getchar)
1.类似的函数有:cin.getchar.fgetc 等 2.问题: 最后的"\n"都不取出来... 2.1.对策:(ZC:下面是 我自己使用后的感受) (1)fflush(std ...
- mac清除launchpad 应用程序和图标
打开launchpad显示所有的程序,有时候却无法删除一些应用图标和程序 用Spotlight(command+空格键),我们输入要删除的应用名称 我们按住Command再点回车, 搜索的结果就会在f ...
- element form 校验数组每一项
1.校验的数据结构如下: 2.html结构 <el-dialog :title="title" :visible.sync="visable" width ...