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
}

 

转载于:https://www.cnblogs.com/wheatCatcher/p/11169265.html