Vuex

目录结构

| store
  | state.js  // 存储变量
  | mutations.js // 修改变量的方法（同步）
  | actions.js  // 修改变量的方法（异步）
  | getters.js  // 获取变量的方法，可对变量进行相关加工
  | mutations-types.js  // 定义mutations的常量名称
  | index.js  // 对外导出的接口文件

具体用法

定义变量

在state.js中定义变量

const state = {
  name: '',
  status: {
    user: false
  }
};
export default state;

定义mutations方法类型常量

在mutations-types.js中创建mutations方法类型常量

export const SET_NAME = 'SET_NAME';
export const SET_STATUS = 'SET_STATUS';

创建mutations方法

在mutations.js中先引入在mutations-types.js中创建的所有类型，再创建mutations方法用来处理状态数据的储存，注意此方法只可处理同步数据

import * as types from './mutations-types';

const mutations = {
// 常量写法需要配合mutations-types.js
  [types.SET_STATUS](state, payload) {
    for(let params in payload){
      state.status[params] = payload[params];
    }
  },
  [types.SET_NAME](state, payload) {
      state.name = payload;
  }
};

export default mutations;

创建actions方法

在actions.js中先引入在mutations-types.js中创建的所有类型，再创建actions方法用来处理状态数据的储存，注意此方法只可处理异步数据

import * as types from './mutations-types';

const actions = {
  setStatus ({commit}, params) {
    commit(types.SET_STATUS, params)
  },
  setName ({commit}, params) {
    commit(types.SET_NAME, params)
  }
}

export default actions;

创建getters方法

在getters.js中创建getters方法用来获取已存储状态数据的值

const getters = {
  getStatus: state => {
    return state.status;
  },
  getUser: (state, getters) => {
    // 可在内部调用getters
    return getters.getStatus.user
  }，
  getName: state => {
    return state.name;
  },
};
export default getters;

同步存入

// $store: 全局变量store, commit用以触发mutations中的函数，SET_STATUS是mutations中的函数名，{user:true}函数的参数
this.$store.commit('SET_STATUS', {user: true})
this.$store.commit('SET_NAME', 'test')

异步存入

this.$store.dispatch('setStatus', {user: false})
this.$store.dispatch("setName", 'test');

获取状态数据

this.$store.getters.getStatus.user
this.$store.getters.getUser
this.$store.getters.getName