业务场景:刷新页面时,首次拉取所有配置,存储到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全局存储的更多相关文章

  1. vue学习过程总结(06) - vue的数据存储store

    这个不知道能怎么叫不?现在对这块很迷.以下为个人理解 store是状态管理,是一个对象,有其属性和方法. 常见的值有:state/mutations/actions/getters, 这几个值的意思: ...

  2. vue store存储commit和dispatch

    vue store存储commit和dispatch this.$store.commit('toShowLoginDialog', true);this.$store.dispatch('toSho ...

  3. vue项目持久化存储数据的实现代码

    方式一.使用localStorage在数据存储 1.要在浏览器刷新的时候重新存储起来 if (window.localStorage.getItem(authToken)) { store.commi ...

  4. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  5. 生命周期函数以及vue的全局注册

    beforeCreate 在创造实例之前 created 创造实例以后 beforeMount 在挂载前 render 渲染节点到页面上 //将虚拟dom数组渲染出来 mounted 挂载以后 bef ...

  6. vue入门全局配置

    全局配置 Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列属性: silent 类型:boolean 默认值:false 用法: Vue.config.silen ...

  7. Vue中全局导入和按需导入的区别

    export {router} //按需导出 import {router} from './router' //按需导入路由模块 export default //全局导出store模块 store ...

  8. vue 自定义全局方法

    import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...

  9. 黑马vue---28、vue中全局过滤器的基本使用

    黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...

随机推荐

  1. [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 ...

  2. SpringCloud学习成长之路 六 cloud配置中心

    一.简介 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组件spring cloud config ...

  3. python基础之面向对象(二)

    一点提醒 首先在使用pickle读取load时,需要先把使用到的类import上,否则会报错.在pycharm中使用时不会报错,但在linux或者cmd时就会报错!必须import. 报错提示: Fi ...

  4. mysql正则替换某个字段值里面的某个字符串

    sql语句如下: UPDATE `ccvms_video` SET title=REPLACE(title, "最", "相对") WHERE title LI ...

  5. C#线程 BeginInvoke和EndInvoke使用方法

    一.C#线程概述 在操作系统中一个进程至少要包含一个线程,然后,在某些时候需要在同一个进程中同时执行多项任务,或是为了提供程序的性能,将要执行的任务分解成多个子任务执行.这就需要在同一个进程中开启多个 ...

  6. iOS面试-assign与retain

    assign 对基础数据类型 (NSInteger,CGFloat)和C数据类型(int, float, double, char)等等.        此标记说明设置器直接进行赋值,这也是默认值.在 ...

  7. springmvc+mybatis多数据源配置,AOP注解动态切换数据源

    springmvc与springboot没多大区别,springboot一个jar包配置几乎包含了所有springmvc,也不需要繁琐的xml配置,springmvc需要配置多种jar包,需要繁琐的x ...

  8. C/C++.控制台输入(cin/getchar)

    1.类似的函数有:cin.getchar.fgetc 等 2.问题: 最后的"\n"都不取出来... 2.1.对策:(ZC:下面是 我自己使用后的感受) (1)fflush(std ...

  9. mac清除launchpad 应用程序和图标

    打开launchpad显示所有的程序,有时候却无法删除一些应用图标和程序 用Spotlight(command+空格键),我们输入要删除的应用名称 我们按住Command再点回车, 搜索的结果就会在f ...

  10. element form 校验数组每一项

    1.校验的数据结构如下: 2.html结构 <el-dialog :title="title" :visible.sync="visable" width ...