vuex modules使用

使用Vuex的模块化结构可以更好地组织和管理应用程序的状态。以下是使用Vuex模块的步骤：

1. 创建一个模块对象，包含该模块的状态、mutation、action和getter：

const myModule = {
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

2. 在store中注册模块，使用`modules`选项：

import Vuex from 'vuex'

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

3. 在组件中使用模块的状态、mutation、action和getter：

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    // 获取模块状态
    ...mapState({
      count: state => state.myModule.count
    }),
    // 获取模块的getter
    ...mapGetters('myModule', {
      doubleCount: 'doubleCount'
    })
  },
  methods: {
    // 触发模块的mutation
    ...mapMutations('myModule', {
      increment: 'increment'
    }),
    // 触发模块的action
    ...mapActions('myModule', {
      incrementAsync: 'incrementAsync'
    })
  }
}

在上面的示例中，我们使用`mapState`、`mapMutations`、`mapActions`和`mapGetters`辅助函数来访问模块的状态、mutation、action和getter。这些辅助函数会自动将模块的名称添加到对应的方法名中，以便正确地访问模块。这样，我们就可以在组件中使用模块的状态和方法，而无需手动编写长长的命名空间前缀。