Vuex代码分离

随着功能的增加，state、getters、mutations、actions 中的代码会越来越多，为了方便后期管理，可以进行代码分离。

在 store 文件夹下新建 state.js，代码如下。

export default {
    num: 10
}

index.js 代码如下。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

// 1. 引用刚才创建的 state 模块
import state from './state';

const store = new Vuex.Store({
  // 2. state 的属性值就是引入模块的名称
  state: state,
  getters: {
    newnum(state) {
      return state.num + '元';
    }
  },
  mutations: {
    getAdd(state, data) {
      state.num++;
      console.log(data);
    }
  },
  actions: {
    getAddActions({ commit }, data) { // 使用了解构赋值
      setTimeout(() => {
        commit('getAdd', data);
      }, 1000);
    }
  }
});

export default store;

代码解析如下。

上述代码中的 state 属性名和属性值相同，根据 es6 语法，state: state 可以简写成 state，代码如下。

const store = new Vuex.Store({
  state, // 简写形式，等同于 state: state
  getters: {
    newnum(state) {
      return state.num + '元';
    }
  }
});

getters、mutations、actions 的分离方式和 state 相同，详情可观看视频讲解。