Vuex插件

Vuex可以帮我们全局存储数据，处理数据。

1.安装

首先在项目目录执行以下命令

npm install vuex --save

安装成功后就可以使用了

2.使用

首先在main.js里配置

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vuex from 'vuex'

// 引入axios
import axios from 'axios';
// 挂载到vue原型链上
Vue.prototype.axios = axios;


Vue.config.productionTip = false
Vue.use(ElementUI);
//使用vuex
Vue.use( Vuex );
//创建store实例
const store = new Vuex.Store({
  state:{//数据源
    loginForm:JSON.parse(sessionStorage.getItem(`loginForm`))||{}
  },
  getters:{//获取state的数据
    getUserMsg: (state) => {
      return state.loginForm;
    }
  },
  mutations:{//修改state的数据
    setUserMsg: (state,form) => {
      sessionStorage.setItem(`loginForm`, JSON.stringify(form))
      state.loginForm = form;
    }
  }
});

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

接下来我们就可以在组件中调用方法操作state的数据了

export default {
    name:"indexMain",
    data() {
        return {
            isCollapse: false,
            form:this.$store.getters.getUserMsg,//将state的数据和data的数据绑定
            menu:[]
        };
    },
}
this.$store.commit('setUserMsg',data.data);//修改state的数据