Vue 3 Composition API 中巧用 Pinia：如何访问 State 和 Getter？

2024-03-19 14:31:57

Vue 3 Composition API 中巧用 Pinia 访问 State 和 Getter

引言

在 Vue 3 的 Composition API 中，Pinia 是一个强大的状态管理库，它可以帮助你管理应用程序的状态。想要访问 Pinia 存储的 state 和 getter，你需要采取一些步骤。本文将详细介绍这些步骤，并提供一个示例来演示如何使用它们。

创建 Pinia 存储实例

首先，在 <script setup> 部分中创建一个 Pinia 存储实例。使用 defineStore 函数，如下所示：

const productStore = defineStore('products', () => {
  // ...
});

使用 computed 函数访问 getter

要访问 getter，可以使用 computed 函数。getter 是派生状态，它从 state 计算而来。例如，你可以创建一个 getter 来获取产品列表：

const allProducts = computed(() => productStore.getProducts);

使用 .value 访问 state

要访问 state，你需要使用 .value 属性。state 是一个响应式对象，.value 属性返回它的当前值。例如，你可以访问产品数量：

const totalProducts = productStore.products.value.length;

示例代码

以下是一个示例，展示了如何使用 Pinia 存储管理来访问 state 和 getter：

stores/products.js

export const useProductStore = defineStore('products', () => {
  const products = ref([]);

  const fetchProducts = async () => {
    // ...
  };

  const initialized = useInitializeStore(fetchProducts);
  const loading = computed(() => initialized.value && products.value.length === 0);

  const getProducts = computed(() => products.value);

  return {
    products,
    loading,
    initialized,
    getProducts,
  };
});

viewPage.vue

<script setup>
import { useProductStore } from '@/stores/products';

const productStore = useProductStore();
const allProducts = computed(() => productStore.getProducts);

console.log('All products:', allProducts.value);
</script>