美文网首页Vue
vue——store全局存储

vue——store全局存储

作者: King斌 | 来源:发表于2021-02-25 13:08 被阅读0次

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全局存储

    本文链接:https://www.haomeiwen.com/subject/umayfltx.html