Vue

vue——store全局存储

2021-02-25  本文已影响0人  King斌

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
}

上一篇下一篇

猜你喜欢

热点阅读