VUE----状态管理器vuex

[1]安装vuex ，由于是开发环境和正式环境都需要用到，所以需要使用命令

--安装vuex
npm install vuex --save

安装完毕后，可在package.json文件的dependencies查看是否有vuex

[2]使用vuex，创建store.js文件，并将其挂载

//store.js
// 状态管理器
// 引入vuex
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

// 创建vuex对象 
const store = new Vuex.Store({
  state: {

  },
  mutations: {  //

  },
  actions: {  //处理异步操作

  },
  getters: {  //类似计算属性  
  
  },
  modules: {  //模块

  }
});

//导出vuex
export default store;

挂载：

挂载到main.js
（1）导入
import store from './store/store.js'
（2）挂载
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

需求：在人员登陆成功时，将人员的信息存储到状态管理器中，并且存储成功后，返回一个‘存储成功’的信息给组件。当人员信息更改时可以更改人员信息，可清空人员信息

(1)首先需要初始化人员的基本信息state：

//设置状态里面的属性值 
state: {
    personInfo: {
      personId: '',
      openId: '',
      nickName: '',
      headImgUrl:'',
      provCode: '',
      cityCode: '',
      countyCode: ''
    }
  }

(2)设置人员信息和清空人员信息mutations：

mutations: {
    // 设置人员信息
    setPersonInfo: (state, e = {}) => {
      state.personInfo.personId = e.personId;
      state.personInfo.openId = e.openId;
      state.personInfo.nickName = e.nickName;
      state.personInfo.headImgUrl = e.headImgUrl;
      state.personInfo.provCode = e.provCode;
      state.personInfo.cityCode = e.cityCode;
      state.personInfo.countyCode = e.countyCode;
    },
    // 清除人员信息
    clearPersonInfo: state => {
      state.personInfo.personId = '';
      state.personInfo.openId = '';
      state.personInfo.nickName = '';
      state.personInfo.headImgUrl = '';
      state.personInfo.provCode = '';
      state.personInfo.cityCode = '';
      state.personInfo.countyCode = '';
    }
  }

页面如何调用状态管理器里面mutations里面的方法呢：

methods: {
    setPersonInfo() {
      const personInfo = {}
      // 方法一： 
      this.$store.commit('setPersonInfo', personInfo);
      //  方法二：
      this.$store.commit({
        type: 'setPersonInfo', // 方法名
        personInfo        //参数....
      })
        
    }
  }

(3)如何获取人员的信息，在这里就是需要用到actions（官方推荐，如何使用到了异步处理，最好使用actions来处理）：

 actions: {  //处理异步操作
    asycnSetPersonInfo: (context, payload) => { 
        // context是上下文，通过它来执行mutation里面的方法
        // payload是页面传来的参数
      // 整个asycnSetPersonInfo 返回了一个promise
      return new Promise((resolve, reject) => {
        // 异步操作之后获取到了返回值personInfo
        // 执行mutations里面的setPersonInfo方法
        context.commit('setPersonInfo', 异步操作返回的人员对象信息personInfo);
        // 回调，一般是给页面一个提示，告诉它，我这里执行完了
        resolve('人员设置完毕');
      })
    },
  }

页面调用状态管理器actions里面的异步操作：

methods: {
    setPersonInfo() {
        // 调用状态管理器里面的asycnSetPersonInfo方法，并传了两个参树
      this.$store.dispatch('asycnSetPersonInfo', {
        code,
        password
      }).then(res => {
        console.log(res);  //这里会打印：人员设置完毕     
      });
    }
  },

 

献上官方的一张图：

[1]如果不涉及异步处理，可直接在组建里使用commit来调用mutations里面定义的方法

[2]涉及到了异步处理，最好在actions里面异步，然后在actions里面再调用mutations里面的方法

[3]不要直接在组件里更改state里面的信息(虽然可以更改成功)，看箭头流向

[4]devtools是一个谷歌插件，需要下载，用于监控state里面的值变化的，作用不大

值得注意的是：页面一刷新，vuex存储的内容就是丢失，所以需要根据业务要求，结合localStorage或sessionStorage来使用