How to access Vuex module getters and mutations?

在Vue.js应用中，Vuex是一个集中式状态管理库。当使用模块化的方式构建Vuex store时，每个模块可以拥有自己的state、mutations、actions和getters。以下是如何访问Vuex模块中的getter和mutation的方法：

1. 访问Getter

假设我们有一个名为user的Vuex模块，其中定义了一个getter fullName。要在Vue组件中访问这个getter，可以使用mapGetters辅助函数或直接通过$store.getters属性访问。下面是两种访问方式的示例：

使用mapGetters辅助函数：

javascript
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters('user', ['fullName'])
  }
}

这里，mapGetters的第一个参数是模块名user，第二个参数是一个数组，包含我们要映射到组件计算属性的getter名称。

直接访问：

javascript
export default {
  computed: {
    fullName() {
      return this.$store.getters['user/fullName'];
    }
  }
}

2. 触发Mutation

假设在同一个user模块中，我们有一个mutation updateName。在Vue组件中触发这个mutation的方法如下：

使用mapMutations辅助函数：

javascript
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations('user', ['updateName'])
  }
}

在这个例子中，我们使用mapMutations将user模块中的updateName mutation映射到组件的方法中。

直接提交mutation：

javascript
export default {
  methods: {
    updateName(newName) {
      this.$store.commit('user/updateName', newName);
    }
  }
}

以上两种方法均可用于在Vue组件中访问或触发Vuex模块中的getter和mutation。这样的模块化管理方式有助于保持大型应用的代码清晰和组织良好。