vuex里面的辅助函数mapState,mapGetters,mapMutations和mapActions用法

mapState: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的状态值。它接受一个数组或对象作为参数，用于指定我们想要映射的状态。当我们在组件中使用这个辅助函数时，它会返回一个计算属性对象，其中包含了我们所需的状态值。

例如，假设我们有一个名为`count`的状态值，我们可以使用`mapState`辅助函数将其映射到组件中：

import { mapState } from 'vuex';

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

现在，在组件中我们就可以直接使用`count`这个计算属性来访问 Vuex store 中的`count`状态值。

mapGetters: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 getter 方法。它跟`mapState`的用法类似，接受一个数组或对象作为参数，用于指定我们想要映射的 getter 方法。同样，它也返回一个计算属性对象。

例如，假设我们有一个名为`doubleCount`的 getter 方法，我们可以使用`mapGetters`辅助函数将其映射到组件中：

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['doubleCount'])
  }
}

现在，在组件中我们就可以直接使用`doubleCount`这个计算属性来访问 Vuex store 中的`doubleCount` getter 方法的返回值。

mapMutations: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 mutation 方法。它也接受一个数组或对象作为参数，用于指定我们想要映射的 mutation 方法。不同于`mapState`和`mapGetters`，`mapMutations`返回的是一个对象，其中包含了我们所需的 mutation 方法。

例如，假设我们有一个名为`increment`的 mutation 方法，我们可以使用`mapMutations`辅助函数将其映射到组件中：

import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['increment'])
  }
}

现在，在组件中我们就可以直接调用`increment`方法来触发 Vuex store 中的`increment` mutation。

mapActions: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 action 方法。它同样接受一个数组或对象作为参数，用于指定我们想要映射的 action 方法。类似于`mapMutations`，`mapActions`返回的也是一个对象，其中包含了我们所需的 action 方法。

例如，假设我们有一个名为`fetchData`的 action 方法，我们可以使用`mapActions`辅助函数将其映射到组件中：

import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['fetchData'])
  }
}

现在，在组件中我们就可以直接调用`fetchData`方法来触发 Vuex store 中的`fetchData` action。