前端｜Vue Vue3中使用Pinia，保姆级教程

146 2个月前

为什么选择Pinia

在构建大型或中型Vue应用时，组件之间的状态共享和管理是一个不可避免的挑战。Vue.js的官方状态管理库Vuex在过去几年里一直是解决这个问题的主流方案。但是，Vuex的复杂性和对TypeScript支持的限制促使社区寻找更简洁、更灵活的解决方案。这就是Pinia应运而生的背景。

Pinia是Vue.js的一个全新状态管理库，由同一个团队编写，旨在提供一个更轻量级和用户友好的状态管理体验。它以简单直观的API、完全的TypeScript支持和更好的开发体验而受到欢迎。

使用Pinia的好处

简化的API、更好的TypeScript集成、开箱即用的DevTools集成、模块化和灵活性、易于测试、轻量级、持久化和插件支持

Pinia提供了一个更加直观和简洁的API，使得状态管理变得更加容易理解和实施。对于开发者来说，这意味着更少的学习曲线和更快的开发速度。由于Pinia自底向上设计了对TypeScript的支持，使用TypeScript的开发者将会享受到无缝的类型推导和更少的类型断言。Pinia与Vue DevTools的集成提供了更好的调试体验，允许开发者轻松追踪和操作状态，从而提高开发效率。Pinia支持将状态分割为不同的模块，使得状态管理在大型应用中更加清晰和可维护。此外，它的灵活性允许你根据需要轻松地添加插件和中间件。由于Pinia的设计，编写单元测试变得更加直观。你可以轻松地模拟actions和测试state的变更。Pinia的代码库比Vuex更小，对于注重应用大小的项目来说，这是一个明显的优势。Pinia支持通过插件来扩展其功能，例如状态持久化，这使得在浏览器刷新或关闭后恢复用户状态变得简单。

综上所述，Pinia为开发Vue应用的状态管理提供了一个现代化、高效和灵活的解决方案。随着Vue 3的推进，Pinia正在成为越来越多Vue开发者的首选状态管理库。

一、安装 Pinia

# 使用npm npm install pinia # 或者使用yarn yarn add pinia

二、创建第一个Pinia Store

介绍什么是store

在状态管理中，"store"是一个全局对象，用来保存和管理应用的状态。在Pinia中，store是响应式的，这意味着当store中的状态改变时，依赖这些状态的组件会自动更新。每个Pinia store都是一个独立的实体，包含其自己的状态、getters和actions。

如何创建store

要创建一个store，你需要使用Pinia提供的defineStore函数。首先，确保你已经在Vue应用中安装并配置了Pinia。

// main.js 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')

接着，创建一个store文件:

// stores/counter.js import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { // other options... })

定义state

在store中定义state，可以将它看作是组件的data选项。state是一个函数，返回一个对象，这个对象包含你的状态:

state: () => { return { count: 0 } }

定义getters

getters是store的计算属性，用来派生出一些状态。它们会接收state作为第一个参数:

getters: { doubleCount: (state) => state.count * 2 }

定义actions

actions是用来执行状态更改的函数，可以是同步的，也可以是异步的:

actions: { increment() { this.count++ }, async fetchData() { const data = await fetchDataFromAPI() this.someData = data } }

三、在Vue组件中使用Pinia store

引入store

在你的Vue组件中，你可以使用刚才定义的store:

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

使用state

你可以在组件的setup函数中访问store的state:

const counterStore = useCounterStore() console.log(counterStore.count) // 访问count状态

使用getters

同样地，你可以访问getters:

console.log(counterStore.doubleCount) // 使用doubleCount getter

调用actions

你可以调用actions来更改状态:

counterStore.increment() // 调用increment action

四、Pinia store的高级特性

模块化

随着应用的增长，你可能希望将store分割成多个模块。在Pinia中，你可以通过创建多个store来实现模块化，并在需要的地方引入它们。

插件

Pinia支持插件，这意味着你可以扩展其功能。例如，你可以创建一个插件来自动保存store的状态到localStorage。

持久化状态

为了持久化状态，你可能会需要一个插件，如pinia-plugin-persist，这样你的store的状态可以在页面刷新后保持不变。

确保你已经安装了pinia-plugin-persist插件：

npm install pinia-plugin-persist # 或者 yarn add pinia-plugin-persist

// stores/counter.js import { defineStore } from 'pinia' import piniaPluginPersist from 'pinia-plugin-persist' export const useCounterStore = defineStore('counter', { // ... persist: true }) // main.js pinia.use(piniaPluginPersist)

五、综合示例

下面是一个综合示例，显示了如何在Vue组件中使用Pinia store，包括state、getters和actions的使用。

创建store:

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

在组件中使用store:

<template> <div> <p>Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> </template> <script> import { useCounterStore } from '@/stores/counter' export default { setup() { const counterStore = useCounterStore() // 使用store中的状态和方法 return { count: counterStore.count, doubleCount: counterStore.doubleCount, increment: counterStore.increment, decrement: counterStore.decrement } } } </script>

配置持久化:

// stores/counter.js import { defineStore } from 'pinia' import { persist } from 'pinia-plugin-persist' export const useCounterStore = defineStore({ id: 'counter', state: () => ({ count: 0 }), getters: { doubleCount: (state) => state.count * 2 }, actions: { increment() { this.count++ }, decrement() { this.count-- } }, plugins: [persist()] })

在Vue应用中安装插件:

npm install pinia-plugin-persist # 或者 yarn add pinia-plugin-persist

// main.js import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import { persist } from 'pinia-plugin-persist' const app = createApp(App) const pinia = createPinia() pinia.use(persist) app.use(pinia) app.mount('#app')

这个综合示例中，我们创建了一个简单的计数器store，包含增加和减少计数的actions，以及一个将计数翻倍的getter。在Vue组件中，我们使用setup函数导入store并返回其状态和方法。此外，我们还演示了如何使用pinia-plugin-persist插件来持久化store的状态