Pinia
是 Vue3 中官方推荐的状态管理库,作为 Vuex 的替代品,它更简洁易用,并且支持模块化、类型推断和 DevTools 集成。Pinia 非常适合在 Vue3 项目中管理全局状态。
首先,我们需要在 Vue3 项目中安装 Pinia:
npm install 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');
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;
}
}
});
使用 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>
Pinia 本身没有内置持久化功能,但我们可以通过插件 pinia-plugin-persistedstate
来实现持久化功能。这个插件会将 store 中的数据保存到 localStorage
或 sessionStorage
中,以便页面刷新后数据不会丢失。
使用以下命令安装持久化插件:
npm install pinia-plugin-persistedstate
在初始化 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');
在定义 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
,并自动恢复。
我们还可以自定义哪些 state 属性需要持久化,以及如何存储它们:
persist: {
enabled: true,
strategies: [
{
// 自定义 key
key: 'my_user_data',
// 存储在 sessionStorage
storage: sessionStorage,
// 仅持久化某些字段
paths: ['name'],
},
],
}
Pinia 提供了一种简单、直观的方式来管理 Vue3 应用的全局状态,而通过持久化插件,我们可以很容易地将状态保存到浏览器的本地存储中。在大型 Vue3 项目中,Pinia 是一个非常灵活且强大的工具,既能管理复杂的应用状态,也能轻松持久化数据。