Pinia 有哪些使用场景？

参考答案：

Pinia 是 Vue.js 官方推荐的状态管理工具，它的设计简单、轻量，适合多种场景使用，特别是在 Vue 3 的项目中。

以下是 Pinia 的主要使用场景及具体说明：

---

1. 全局状态管理

Pinia 的核心功能是管理全局状态，适用于以下场景：

• 跨组件共享数据：当多个组件需要共享同一份状态时（如用户信息、权限等）。
• 全局状态存储：如用户登录态、应用设置（语言、主题）、权限配置等。

示例：

// store/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    isLoggedIn: false,
    username: '',
  }),
  actions: {
    login(username) {
      this.isLoggedIn = true;
      this.username = username;
    },
    logout() {
      this.isLoggedIn = false;
      this.username = '';
    },
  },
});

---

2. 持久化数据存储

在需要跨页面或跨会话保留某些数据时，Pinia 可以与持久化插件结合（如 pinia-plugin-persistedstate）实现状态持久化。

适用场景：

• 保留登录信息、用户配置、购物车数据等。
• 恢复应用的上一次操作状态。

示例：

import { defineStore } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

export const useSettingsStore = defineStore('settings', {
  state: () => ({
    theme: 'light',
  }),
  persist: true, // 开启持久化
});

---

3. 模块化管理复杂项目

在大型项目中，Pinia 通过独立 Store 文件管理不同模块的数据和逻辑，避免代码耦合，使代码更清晰。

适用场景：

• 项目中存在多个功能模块（如用户、权限、订单、商品管理等），需要对状态进行模块化划分。
• 不同模块间需要数据共享或依赖。

示例：

// stores/user.js
export const useUserStore = defineStore('user', { /* 用户模块 */ });
// stores/product.js
export const useProductStore = defineStore('product', { /* 商品模块 */ });

---

4. 异步数据管理

Pinia 支持直接在 Store 中使用异步操作，可以在 actions 中执行 API 请求，并更新状态。

适用场景：

• 处理异步请求（如从后端获取数据并更新全局状态）。
• 在状态管理中封装业务逻辑，避免将复杂逻辑直接写在组件中。

示例：

import axios from 'axios';

export const useProductStore = defineStore('product', {
  state: () => ({
    products: [],
  }),
  actions: {
    async fetchProducts() {
      const response = await axios.get('/api/products');
      this.products = response.data;
    },
  },
});

---

5. 组件解耦与状态分离

Pinia 提供响应式的状态管理，能够让组件逻辑与数据状态分离，适用于以下场景：

• 当组件的数据和逻辑复杂，需要抽离到 Store 中管理。
• 多个组件依赖同一逻辑和数据时，通过 Store 提供统一的接口。

示例：

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

// 在多个组件中使用：
const counterStore = useCounterStore();
counterStore.increment();

---

6. 替代 Vuex 进行状态管理

Pinia 是 Vuex 的现代化替代品，在以下场景中可以选择 Pinia：

• 新项目：在 Vue 3 项目中推荐直接使用 Pinia。
• 迁移项目：将旧 Vuex 项目迁移至 Vue 3 时，使用 Pinia 替代 Vuex。

示例：

// 使用 Pinia 替代 Vuex 语法更简洁
const useStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

---

7. 适配 TypeScript 项目

Pinia 对 TypeScript 支持友好，适合以下场景：

• 项目使用 TypeScript，状态和逻辑需要严格的类型约束。
• 需要提升开发效率，通过类型推导减少错误。

示例：

import { defineStore } from 'pinia';

interface State {
  count: number;
}

export const useCounterStore = defineStore<'counter', State>('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

---

8. 动态创建 Store

Pinia 支持动态创建 Store，可以根据实际需求动态生成状态管理实例。适用于以下场景：

• 动态模块加载或组件实例化时创建独立的状态实例。

示例：

import { defineStore } from 'pinia';

export const createDynamicStore = (id) => {
  return defineStore(id, {
    state: () => ({
      data: null,
    }),
  });
};

const storeA = createDynamicStore('moduleA');
const storeB = createDynamicStore('moduleB');

题目要点：

Pinia 适用的场景非常广泛，涵盖全局状态管理、异步请求、模块化管理、状态持久化、TypeScript 支持等功能。在现代 Vue 3 项目中，Pinia 是轻量、高效、易用的状态管理工具，能够帮助开发者更好地组织和维护复杂的应用逻辑。