在 Vue3 中使用 mapState 高效获取 Vuex Store 中的多值

2023-12-24 20:52:36

轻松驾驭 Vuex Store：使用 mapState 简化数据访问

使用 Vuex 管理共享状态

Vuex 作为 Vue.js 应用程序的中央状态管理器，使开发者能够轻松地管理共享状态。通过 Vuex，您可以集中存储和操作应用程序中共享的数据，从而提升代码的可维护性、可测试性和响应能力。

mapState 带来高效数据获取

Vue3 引入了 mapState 辅助函数，它旨在简化从 Vuex Store 中获取多个状态值的过程。利用 mapState，您只需编写一行代码即可获取所需数据，无需进行冗长的手动获取操作。这极大地提高了代码的可读性、简洁性和维护性。

mapState 的优势：

减少代码冗余： 避免重复获取多个状态值的繁琐步骤。
简化数据访问： 提供一个一致且便捷的方式来访问 Store 中的数据。
响应式性： 从 Store 中获取的状态值是响应式的，这意味着当 Store 发生变化时，这些值会自动更新。
类型安全： 与 TypeScript 结合使用时，mapState 确保类型安全，避免获取错误类型的值。

mapState 语法解析

mapState 的语法如下：

mapState(
  mapper?: string[] | Function | Object,
  options?: ComputedOptions
): ComputedOptions;

mapper 参数：

mapper 参数指定要从 Store 中获取的状态值。它可以是：

字符串数组： 包含要获取的状态值的名称。
函数： 返回一个对象，其中键是计算属性的名称，值是 getter 函数。
对象： 一个对象，其中键是计算属性的名称，值是配置选项。

options 参数：

options 参数是可选的，用于配置计算属性的行为，例如缓存策略或 getter 函数。

用法示例

使用字符串数组：

import { mapState } from 'vuex';

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

此示例将创建两个计算属性：count 和 user，它们分别映射到 Vuex Store 中的 count 和 user 状态值。

使用函数：

export default {
  computed: {
    ...mapState(state => ({
      fullName: `${state.firstName} ${state.lastName}`
    }))
  }
};

此示例将创建一个名为 fullName 的计算属性，它根据 Store 中的 firstName 和 lastName 状态值计算完整的姓名。

使用对象：

export default {
  computed: {
    ...mapState({
      count: {
        getter: state => state.count + 1
      },
      user: {
        getter: state => state.user,
        cache: false
      }
    })
  }
};

此示例中，count 计算属性使用一个 getter 函数来计算 Store 中 count 状态值的加一值。user 计算属性禁用缓存，以便每次重新计算时都从 Store 中获取最新值。

与 TypeScript 搭配使用

在 TypeScript 中使用 mapState 时，您可以利用类型推断来确保类型安全。以下是如何在 TypeScript 中使用 mapState：

import { mapState } from 'vuex';

interface State {
  count: number;
  user: {
    firstName: string;
    lastName: string;
  };
}

export default {
  computed: {
    ...mapState<State>(['count', 'user'])
  }
};