Vuex

1、专为Vue设计的状态管理模式，集中存储和管理应用程序中所有组件的状态
2、安装：npm install vuex --save
3、使用：src>md data 建立专为存储使用的文件夹

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import appConfig from './modules/appConfig'
import addStrategy from './modules/addStrategy'

Vue.use(Vuex)   //  Vue.use() 来安装使用 Vuex

const store = new Vuex.Store({
  modules: {
    user,
    appConfig,
    addStrategy
  }
})
export default store
// main.js 入口文件 引入 store 并注册到 vue 实例中
import store from './data'
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})
// 在组件中使用
①. 引入vuex中各属性对应的辅助函数
// user.js
const state = {
userInfo:JSON.parse(sessionStorage.getItem(`userInfo`))||{},
}; // 初始化的状态
const mutations = {   // 处理状态
  setUserInfo(state, userInfo) {   //保存用户登录信息
    sessionStorage.setItem(`userInfo`, JSON.stringify(userInfo))
    state.userInfo = userInfo;
  },
};
const getters = {};
const actions = {
  updateUserInfo(context,value){
    context.commit('setUserInfo',value) // 提交改变的状态
  },
};
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}
import {mapActions, mapState,mapMutations} from 'vuex' //注册 action 、 state 、mutations
②. 使用store中的状态、数据、方法 / 映射 store.state.count
computed: {
      ...mapState(`user`, [ `userInfo`])
 }
// 取值 this.userInfo