【vuex】状态管理器store、mutation、state

VueX 一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态。适合在需要多个地方更新同一个数据的时候使用。
状态管理核心状态管理有5个核心，分别是state、getter、mutation、action以及module。

Vuex使用单一状态树，即用一个对象就包含了全部的状态数据。

• state => 基本数据，单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等。
• getters => 从基本数据派生的数据，类似vue.js的计算属性，state中的某个需要派生状态的值发生改变的时候才会被重新计算。
• mutations => 提交更改数据的方法，同步！更改store中state状态的唯一方法提交mutations触发store.commit。
• actions => 像一个装饰器，包裹mutations，使之可以异步。
  modules => 模块化Vuex

新建一个mutation-types文件来存放常量

// userInfo
export const GET_ACCOUNT = 'getAccount';
export const SET_ACCOUNT = 'setAccount';

定义state,可在store文件的module模块里对应文件定义

const state = {
  userinfo: {
    firstname: getUsername(),
    mobile: '',
    email: '',
    dob: '',
    gender: ''
};

声明mutation，触发commit 更新state

const mutations = {
  [GET_ACCOUNT]: (_state, userinfo) => {
    _state.userinfo = userinfo;
    setUsername(userinfo.firstname);
  },
  [SET_ACCOUNT]: (_state, userinfo) => {
    _state.userinfo = userinfo;
    if (userinfo.firstname) {
      setUsername(userinfo.firstname);
    } else {
      clearUsername();
    }
  }
};

定义action方法，异步触发更新state

const actions = {
  async setAccount({ commit },params) {
    const { data,status, message } = await accountApi.saveAccount(params);
    if (status) commit(SET_ACCOUNT, data);
    return { data,status, message };
  },
  async getAccount({ commit }) {
    const { data,status, message } = await accountApi.getAccount();
    commit(GET_ACCOUNT, data);
    return { data,status, message };
  }
};

对应文件把state在computed里都map过来

  computed: {
    footer() {
      return {
        mobileMode: 'none'
      };
    },
    ...mapState('account', ['userinfo'])
  },

把对应方法在method里map过来

  methods: {
    ...mapActions('account', ['setAccount']),
// 调用全局方法setAccount更新store里的值
   async setAccountBirth(date) {
        const { status, message } = await this.setAccount({
            profile: {dob: date}
        });
        // do something
    }