在Vuex中导入可重用的操作

// 模块定义
const myModule = {
  state: {
    // 状态
    count: 0
  },
  mutations: {
    // 操作
    increment(state) {
      state.count++
    }
  },
  actions: {
    // 动作
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    // 获取器
    doubleCount(state) {
      return state.count * 2
    }
  }
}

// 导出模块
export default myModule

import Vue from 'vue'
import Vuex from 'vuex'
import myModule from './myModule'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    myModule
  }
})

export default store

// 调用操作
this.$store.commit('myModule/increment')

// 调用动作
this.$store.dispatch('myModule/asyncIncrement')

// 获取状态
const count = this.$store.state.myModule.count

// 获取获取器的值
const doubleCount = this.$store.getters['myModule/doubleCount']