Vue 中的 `mapState`, `mapGetters`, `mapActions` 和 `mapMutations` 是做什么用的？

在 Vue 中，`mapState`, `mapGetters`, `mapActions`, 和 `mapMutations` 是四个辅助功能，它们帮助我们在 Vue 组件内部更方便地管理和使用 Vuex 状态管理库（Vuex）的状态、getter、actions 和 mutations。

1. **mapState**:
这个工具用于将 Vuex 的状态映射到组件的 props 上。当我们调用 `mapState` 并传入一个对象，它会在组件实例上添加相应的属性，当状态变化时，这些属性的值会被自动更新。例如：

   export default {
     computed: {
       ...mapState(['count'])
     }
   };

这会让组件能直接通过 `this.count` 访问状态里的 `count` 值。

2. **mapGetters**:
类似于 mapState，但它用于获取 getters。这允许你在组件中像访问本地数据一样轻松地获取来自 store 的计算值：

   computed: {
     fullName: mapGetter('fullName')
   }

当 getters 变化时，`fullName` 的值也会同步更新。

3. **mapActions**:
用于将 Vuex 的 actions 映射到组件的 methods。通过这种方式，我们可以异步地调用 actions，并在回调中处理结果：

   methods: {
     async fetchData() {
       await this.$store.dispatch('fetchDataAction');
     }
   }

这使得我们可以在组件里发起异步操作，而不是直接调用 actions。

4. **mapMutations**:
将 mutations 映射到组件的 methods，使得组件可以直接提交 mutations，改变状态。这种方式可以保持组件的纯度，因为提交 mutations 应该由 store 来统一控制：

   methods: {
     updateCount(newCount) {
       this.$store.commit('increment', newCount);
     }
   }

使用这些工具简化了组件和 Vuex 之间的交互，提高了代码的组织性和可维护性。