当前位置：首页 > article >正文

Vue3状态管理Pinia

article 2024/11/14 0:34:11

Vue3 的 Pinia 使用指南

Pinia 是 Vue3 中官方推荐的状态管理库，作为 Vuex 的替代品，它更简洁易用，并且支持模块化、类型推断和 DevTools 集成。Pinia 非常适合在 Vue3 项目中管理全局状态。

1. 安装 Pinia

首先，我们需要在 Vue3 项目中安装 Pinia：

npm install pinia

2. 配置 Pinia

在项目的入口文件（如 main.js 或 main.ts）中初始化并使用 Pinia：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);

// 创建 Pinia 实例
const pinia = createPinia();

// 将 Pinia 挂载到 Vue 应用
app.use(pinia);
app.mount('#app');

3. 创建一个 Store

Pinia 的 store 本质上是用来管理状态、getter、action 的对象。我们可以很方便地创建一个 store。

在 src/stores 文件夹下创建一个新的 store 文件，例如 useUserStore.js。

// src/stores/useUserStore.js
import { defineStore } from 'pinia';

// 使用 defineStore 定义一个 store
export const useUserStore = defineStore('user', {
  // state 用于存储全局的状态
  state: () => ({
    name: 'John Doe',
    age: 25,
  }),

  // getter 相当于计算属性，用于衍生出其他数据
  getters: {
    doubleAge: (state) => state.age * 2,
  },

  // actions 用于定义更复杂的逻辑，比如异步操作或修改 state
  actions: {
    incrementAge() {
      this.age += 1;
    },
    async fetchUserData() {
      const data = await fetch('https://api.example.com/user');
      const user = await data.json();
      this.name = user.name;
      this.age = user.age;
    }
  }
});

4. 在组件中使用 Pinia Store

使用 Pinia store 非常简单，在 Vue 组件中导入并调用 useUserStore，然后就可以访问或修改 store 的状态。

<template>
  <div>
    <h1>{{ user.name }}</h1>
    <p>Age: {{ user.age }}</p>
    <p>Double Age: {{ user.doubleAge }}</p>
    <button @click="user.incrementAge">Increase Age</button>
  </div>
</template>

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

// 使用 store
const user = useUserStore();
</script>

5. Pinia 的持久化存储

Pinia 本身没有内置持久化功能，但我们可以通过插件 pinia-plugin-persistedstate 来实现持久化功能。这个插件会将 store 中的数据保存到 localStorage 或 sessionStorage 中，以便页面刷新后数据不会丢失。

5.1 安装插件

使用以下命令安装持久化插件：

npm install pinia-plugin-persistedstate

5.2 配置持久化

在初始化 Pinia 时使用插件：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';

const app = createApp(App);

const pinia = createPinia();

// 使用持久化插件
pinia.use(piniaPluginPersistedstate);

app.use(pinia);
app.mount('#app');

5.3 在 Store 中启用持久化

在定义 Store 时，只需要简单地启用 persist 配置：

// src/stores/useUserStore.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
    age: 25,
  }),

  getters: {
    doubleAge: (state) => state.age * 2,
  },

  actions: {
    incrementAge() {
      this.age += 1;
    },
  },

  // 开启持久化
  persist: {
    enabled: true,
    // 还可以自定义存储到 localStorage 或 sessionStorage
    strategies: [
      {
        key: 'user',
        storage: localStorage,
      },
    ],
  }
});

现在，当我们刷新页面时，user store 中的状态将被保存在 localStorage，并自动恢复。

6. 持久化的高级配置

我们还可以自定义哪些 state 属性需要持久化，以及如何存储它们：

persist: {
  enabled: true,
  strategies: [
    {
      // 自定义 key
      key: 'my_user_data',
      // 存储在 sessionStorage
      storage: sessionStorage,
      // 仅持久化某些字段
      paths: ['name'],
    },
  ],
}