如何让 Pinia 的 `mapState` 和 `mapActions` 针对商店状态和操作？

Pinia的mapState和mapActions：只针对商店状态和操作

介绍

在使用Pinia的状态管理库时，mapState和mapActions助手函数提供了简化组件与商店交互的方式。然而，需要注意的是，这些助手函数仅适用于商店本身中定义的状态和操作。它们不支持getter或其他计算属性。

问题

当您尝试将getter作为状态属性使用时，就会出现问题。例如，如果您在商店中定义了user getter，您不能像对待状态属性那样在模板中使用它。

解决方法

有两种方法可以解决这个问题：

1. 将getter定义为商店状态属性

   这将允许您像其他状态属性一样在模板中使用getter。

2. 直接在模板中使用计算属性

   这是避免在模板中使用getter的更直接方法。

示例

将getter定义为状态属性

export const useUserStore = defineStore("UserStore", {

  state: () => {
    return {
      users: [],
      userDetails: {},
      createUser: {},
      user: computed(() => {
        return this.userDetails;
      }),
    }
  },

直接在模板中使用计算属性

<template>
  <v-card-title v-if="userDetails.name">{{ userDetails.name.givenName + ' ' + userDetails.name.familyName }}</v-card-title>
</template>

结论

Pinia的mapState和mapActions助手函数提供了与商店交互的便利方式，但重要的是要记住它们只针对状态和操作。当需要使用getter时，可以使用上述方法。

常见问题解答

1. 为什么mapState和mapActions不支持getter？

   这是因为getters是计算属性，而不是状态属性。助手函数只能映射到状态和操作。

2. 如果我需要在组件中使用getter怎么办？

   您可以直接使用getter，或者将其定义为商店中的状态属性。

3. 在模板中使用getter和计算属性有什么区别？

   直接使用getter需要您使用v-if或v-for等修饰符来处理空值。计算属性不需要修饰符。

4. 是否可以将getters与mapState和mapActions结合使用？

   不可以，助手函数不支持getters。

5. 我应该在什么时候使用getters？

   当您需要在模板中处理复杂逻辑或从多个状态属性计算新值时，使用getters是一个好主意。