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

Vue 3与Pinia：下一代状态管理的探索

news 2025/7/28 11:44:50

引言

随着Vue 3的推出，Pinia应运而生，成为官方推荐的状态管理库，旨在替代Vuex。Pinia与Vuex相比，带来了以下主要区别和优势：

更简洁的API：Pinia的API设计更加直观和简洁，易于理解和使用。
更好的TypeScript支持：Pinia从一开始就考虑了TypeScript的集成，使得类型安全的代码编写更加方便。
模块化：Pinia支持模块化store，使得状态管理更加灵活和可扩展。
无需映射辅助函数：Pinia不需要像Vuex那样使用map辅助函数，简化了组件中的状态访问。

说人话，升级版的vuex

Pinia简介

Pinia 是一个为 Vue.js 设计的状态管理库，它在 Vue 3 中得到了官方的支持。Pinia 的设计目标是提供一个简单、轻量级且可扩展的状态管理解决方案，它旨在替代 Vuex 4，后者是 Vue 2 的官方状态管理库。Pinia 的设计哲学是尽可能地简化状态管理，同时保持足够的灵活性以适应各种规模的应用。

Pinia的诞生背景和目标

随着 Vue 3 的推出，其引入了 Composition API，这为状态管理提供了新的可能性。Pinia 的诞生正是为了充分利用 Composition API 的优势，提供一个更加现代化和简洁的状态管理库。

Pinia与Vuex 4的主要区别

Pinia 与 Vuex 4 相比，引入了许多改进和新特性：

API 设计：Pinia 的 API 设计更加简洁，去除了 Vuex 4 中的一些复杂概念，如 mutations。
TypeScript 支持：Pinia 从一开始就考虑了 TypeScript 的集成，提供了更好的类型支持。
模块化：Pinia 支持模块化 store，每个模块可以有自己的 state、getters、actions 和 mutations。
无需映射辅助函数：在 Pinia 中，你不需要使用 mapState、mapGetters 等辅助函数，可以直接在组件中使用 store。

Pinia的核心概念（store、state、getters、actions）

Pinia 的核心概念与 Vuex 类似，但进行了简化和改进：

Store：Pinia 的 store 是状态管理的基本单位，每个应用可以有多个 store。一个 store 包含了应用状态（state）、计算属性（getters）、以及修改状态的方法（actions）。
State：State 是应用的当前状态，它是一个响应式的 JavaScript 对象。在 Pinia 中，state 可以是任何类型的数据。
Getters：Getters 类似于 Vue 的计算属性，它们是基于 state 的派生状态。Getters 可以用来返回经过计算或转换的 state，或者用来实现一些通用的逻辑。
Actions：Actions 是用来修改 state 的方法。在 Pinia 中，actions 可以是同步的，也可以是异步的。与 Vuex 不同，Pinia 不再区分 actions 和 mutations，所有的状态修改方法都称为 actions。

安装和设置Pinia

如何在Vue 3项目中安装Pinia

1.安装Pinia：
使用npm或yarn来安装Pinia库。在项目根目录下打开终端，执行以下命令之一：

npm install pinia

或者

yarn add 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)
const pinia = createPinia()app.use(pinia)
app.mount('#app')

创建第一个Pinia store的步骤

1.创建Store文件：
在项目中创建一个新的文件夹，例如stores，并在其中创建一个新的文件，例如counterStore.js。

2.定义Store：
在counterStore.js文件中，使用defineStore函数定义你的store

import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => {return { count: 0 }},actions: {increment() {this.count++},decrement() {this.count--}}
})

在Vue组件中使用Pinia store

1.引入Store：
在需要使用store的组件中，引入你刚才创建的store：

import { useCounterStore } from '@/stores/counterStore'

2.使用Store：
在组件的setup函数中，使用useCounterStore来获取store实例，并访问其状态和方法：

import { useCounterStore } from '@/stores/counterStore'
import { ref } from 'vue'export default {setup() {const counterStore = useCounterStore()const count = ref(counterStore.count)function increment() {counterStore.increment()}function decrement() {counterStore.decrement()}return { count, increment, decrement }}
}

3.模板中使用：
在组件的模板部分，你可以直接使用count变量和increment、decrement方法：

<template><div><h1>Count: {{ count }}</h1><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template>

使用pinia-plugin-persistedstate持久化存储（组件式为例）

下面是一个类似的示例，展示了如何在 Pinia store 中使用组件式的持久化存储：

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';export const useCounterStore = defineStore('counter', () => {// 定义状态const count = ref(100);const msg = ref('hello pinia');// 定义方法const addCount = () => count.value++;const subCount = () => count.value--;// 定义计算属性const double = computed(() => count.value * 2);// 返回状态和方法return {count,addCount,subCount,double,msg,};
}, {// 持久化配置persist: {key: 'hahaha', // 持久化存储的键名paths: ['count', 'msg'], // 指定需要持久化的状态路径},
});

在这个示例中，我们定义了一个名为 useCounterStore 的 Pinia store，其中包含 count 和 msg 两个状态，以及 addCount、subCount 两个方法来修改 count 的值。我们还定义了一个计算属性 double，用于计算 count 的两倍。

在 persist 配置中，我们指定了 key 为 'hahaha'，这将作为存储在本地存储中的键名。paths 数组包含了需要持久化的状态路径，这里我们指定了 count 和 msg。

当热还有其他的persist配置，不太常用就不讲了，有兴趣的小伙伴可以去官网查看（结尾会放）

Pinia进阶特性

插件系统和自定义插件的创建

Pinia 提供了一个强大的插件系统，允许开发者扩展其功能。创建自定义插件可以让你添加全局状态、拦截actions、添加全局getters等。

1.创建插件：
创建一个插件通常涉及定义一个函数，该函数接收一个Pinia实例作为参数，并对其进行操作。

export function myPiniaPlugin(pinia) {// 可以在这里添加全局状态、拦截actions等
}

2.使用插件：
在创建Pinia实例时，可以将插件添加到实例中。

const pinia = createPinia()
pinia.use(myPiniaPlugin)

模块化store和命名空间

Pinia 支持模块化store，允许你将不同的状态逻辑分割到不同的文件中，提高代码的可维护性。

1.定义模块化store：
在模块化store中，你可以定义自己的state、getters和actions。

// store/modules/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: {increment() {this.count++},decrement() {this.count--}}
})

2.使用命名空间：
在模块化store中，你可以使用命名空间来避免不同模块间的命名冲突。

// store/modules/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: {increment() {this.count++},decrement() {this.count--}}
}, {// 开启命名空间namespaced: true
})

3.在组件中使用模块化store：
在组件中，你可以通过命名空间来访问特定模块的状态和actions。

import { useCounterStore } from '@/stores/modules/counter'const counterStore = useCounterStore()
console.log(counterStore.count) // 使用命名空间访问状态
counterStore.increment() // 使用命名空间访问actions