在 Pinia Store 中创建时自动获取初始数据：避免手动初始化

Pinia Store：创建时自动获取初始数据

简介

在 Vue 应用程序中使用 Pinia Store 时，初始化 Store 状态至关重要。本文将探討如何自动在创建时获取 Store 的初始数据，从而避免在代码中手动调用 initialize 函数。

问题陈述

在之前的实现中，我们使用 computed 来访问 Store 数据，同时在必要时从服务器获取数据。然而，此方法违反了 computed 无副作用的性质，并导致在其他 getter 中重复代码。

解决方案：

使用 onMount 钩子：

Pinia Store 提供了生命周期钩子，包括 onMount。此钩子允许我们在 Store 创建时执行操作。通过将 fetchData 函数放置在 onMount 钩子中，我们确保在 Store 创建时立即获取数据。

import { defineStore } from "pinia";
import { ref, onMounted } from "vue";
import myApi from "server";

export const myStore = defineStore("myStore", () => {
  const data = ref();
  const isInitialized = ref(false);

  async function fetchData() {
    if (!isInitialized.value) {
      const res = await myApi.fetchData();
      data.value = res.data;
      isInitialized.value = true;
    }
  }

  onMounted(() => {
    fetchData();
  });

  return { data };
});

其他模式：

除了 onMount 钩子外，还有其他模式可用于在创建时自动获取 Store 数据：

在构造函数中获取数据：

import { defineStore } from "pinia";
import { ref } from "vue";
import myApi from "server";

export const myStore = defineStore("myStore", () => {
  const data = ref();

  (async function() {
    const res = await myApi.fetchData();
    data.value = res.data;
  })();

  return { data };
});

此模式直接在 Store 的构造函数中获取数据。

使用 setup 函数：

import { defineStore } from "pinia";
import { ref, onMounted } from "vue";
import myApi from "server";

export const myStore = defineStore("myStore", {
  setup() {
    const data = ref();
    const isInitialized = ref(false);

    async function fetchData() {
      if (!isInitialized.value) {
        const res = await myApi.fetchData();
        data.value = res.data;
        isInitialized.value = true;
      }
    }

    onMounted(() => {
      fetchData();
    });

    return { data };
  },
});

此模式将 setup 函数与 onMounted 钩子结合起来。

选择合适的模式：

选择最佳模式取决于应用程序的具体需求。对于简单的 Store，onMount 钩子通常就足够了。对于更复杂的 Store，使用 setup 函数或在构造函数中获取数据可以提供更大的灵活性。

结论

通过利用 Pinia Store 的 onMount 钩子，我们可以自动在创建时获取 Store 的初始数据，从而简化 Store 的初始化过程并避免重复代码。本文还探讨了其他模式，例如在构造函数中获取数据和使用 setup 函数，以进一步提高灵活性。

常见问题解答

• 为什么在 computed 中获取数据不是一个好的做法？

  因为 computed 应该是无副作用的，这意味着它们不应更改 Store 状态。在 computed 中获取数据会导致代码重复和潜在的性能问题。

• onMount 钩子是什么？

  onMount 钩子是一种生命周期钩子，允许我们在 Store 创建时执行操作。这对于初始化 Store 状态或执行其他一次性任务非常有用。

• 我可以在 setup 函数中使用 onMounted 钩子吗？

  是的，setup 函数提供了生命周期钩子，包括 onMounted。使用 setup 函数和 onMounted 钩子的组合可以提供更大的灵活性，特别是对于更复杂的 Store。

• 在构造函数中获取数据有哪些优点？

  在构造函数中获取数据确保在 Store 创建时立即获取数据，从而减少了延迟并改善了响应时间。

• 如何选择最佳模式？

  选择最佳模式取决于应用程序的具体需求和 Store 的复杂性。对于简单的 Store，onMount 钩子通常就足够了。对于更复杂的 Store，使用 setup 函数或在构造函数中获取数据可以提供更大的灵活性。