博客站

在 Pinia 中，state 是 Store 的核心部分，用于存储应用的状态。state 的初始化通常在定义 Store 时完成。以下是几种常见的初始化 state 的方式：

1. 使用选项式 API 初始化 State

在选项式 API 中，state 是一个返回初始状态对象的函数。这种方式适合大多数场景。

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  // 初始化 state
  state: () => ({
    count: 0,
    message: 'Hello, Pinia!',
  }),
});

2. 使用组合式 API 初始化 State

在组合式 API 中，state 是通过 ref 或 reactive 来定义的。这种方式更加灵活，适合复杂逻辑。

import { defineStore } from 'pinia';
import { ref, reactive } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  // 使用 ref 初始化 state
  const count = ref(0);

  // 使用 reactive 初始化 state
  const user = reactive({
    name: 'John Doe',
    age: 30,
  });

  return { count, user };
});

3. 在 Store 外部初始化 State

有时你可能需要在 Store 外部初始化 state，例如从服务器获取初始数据。你可以在 actions 中定义一个方法来初始化 state。

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    users: [],
  }),

  actions: {
    async initializeState() {
      // 模拟从服务器获取数据
      const response = await fetch('/api/users');
      const data = await response.json();

      // 初始化 state
      this.users = data;
    },
  },
});

4. 在组件中初始化 State

你也可以在组件中调用 Store 的 actions 来初始化 state。这种方式适合需要在组件加载时初始化状态的场景。

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <ul>
      <li v-for="user in counterStore.users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter';
import { onMounted } from 'vue';

export default {
  setup() {
    const counterStore = useCounterStore();

    // 在组件加载时初始化 state
    onMounted(() => {
      counterStore.initializeState();
    });

    return {
      counterStore,
    };
  },
};
</script>

5. 使用插件初始化 State

Pinia 支持插件机制，你可以通过插件来初始化 state。这种方式适合需要在多个 Store 中共享初始化逻辑的场景。

import { createPinia } from 'pinia';

const pinia = createPinia();

pinia.use(({ store }) => {
  // 在插件中初始化 state
  store.$state = {
    count: 0,
    message: 'Hello, Pinia!',
  };
});

export default pinia;

总结

在 Pinia 中初始化 state 有多种方式，包括使用选项式 API、组合式 API、在 Store 外部初始化、在组件中初始化以及使用插件初始化。根据具体需求选择合适的方式来初始化 state，以确保应用的状态管理灵活且易于维护。