业务场景:刷新页面时,首次拉取所有配置,存储到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. C/C++程序所占用内存区域

    C/C++编译的程序所占用内存区域一般分为以下5个部分: 栈区(stack):由编译器自动分配和释放,用来存放函数的参数.局部变量等.其操作方式类似于数据结构中的栈. 堆区(heap):一般由程序员分 ...

  2. Linux -- 在多线程程序中避免False Sharing

    1.什么是false sharing 在对称多处理器(SMP)系统中,每个处理器均有属于自己的本地高速缓存区. 如图,CPU0和CPU1有各自的本地高速缓存区(cache).线程0和线程1会用到不同的 ...

  3. Linux hostname介绍

    以下操作均时基于 Centos 6.8 操作. 一.现象 在平时工作中,当需要修改主机名时,我们一般会这样操作: 第一步,通过 hostname 命令临时修改主机名. hostname kwang-t ...

  4. centos6.8yum 安装mysql

    1:查看是否已有mysql版本 rpm -qa | grep mysql 删除mysql 账号和用户组 删除/etc/my.cnf 2:有的话就删除 rpm -e mysql-...... 或者 co ...

  5. 禁止CSRF校验实例

    静态文件----提交表单 本例在static目录中建立了一个from.html静态页面,该页面有一个<form>标签,用于向服务端提交POST请求,然后在post.py脚本文件中添加一个路 ...

  6. 【Leetcode_easy】1122. Relative Sort Array

    problem 1122. Relative Sort Array 参考 1. Leetcode_easy_1122. Relative Sort Array; 2. helloacm; 完

  7. GraphQL学习之原理篇

    前言 在上一篇文章基础篇中,我们介绍了GraphQL的语法以及类型系统,算是对GraphQL有个基本的认识.在这一篇中,我们将会介绍GraphQL的实现原理.说到原理,我们就不得不依托于GraphQL ...

  8. Qt598x64vs2017.Kit(构建套件)(安装Qt598x86vs2015)

    1.Qt598-->工具-->选项 1.1. 1.2. 2.20191120 想起 上面第一张图的配置编译器的地方,就想着 Qt598x64vs2017 配置成编译x86,于是将 上面图中 ...

  9. 使用Apache服务部署网站(基于IP,域名,端口)

    本篇主要学习Apache网站服务程序的基本部署,基于IP地址.主机名(域名).端口号的虚拟主机功能. 1.基于IP地址 首先我们需要在虚拟机中线安装Apache服务程序,Apache服务程序的软件包名 ...

  10. linux shell `符号详解

    linux shell `符号详解 <pre>[root@iZ23uewresmZ arjianghu]# echo `ls`asss.html common guaji.php imag ...