【Vue】Pinia

系列文章目录

第八章 Pinia

---

---

前言

Pinia是Vue.js应用程序的状态管理库。它提供了一种简单，轻量级的解决方案，用于在Vue应用程序中管理和维护状态。Pinia库的特点是易于使用和集成，可以使开发者在不牺牲性能的情况下更有效地处理和维护状态。pinia中有三个概念，分别是：state、getter、action，对应于Vue组件中的：data、computed、methods。

---

一、安装和配置：

安装：通过命令：npm install pinia@2.1.7 ，或者在创建vue项目的时候勾选使用Pinia。
配置：在main.js中，需要创建pinia对象，并与app对象进行绑定，示例代码如下：

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

二、基本使用

通常在src目录下创建一个stores文件夹，然后在里面按需创建js文件。假设要创建一个用于管理counter全局变量的库文件，那么可以创建counter.js文件，然后填入以下代码：

import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', () => {const count = ref(0)function increment() {count.value++}return { count, increment }
})

或者使用选项式API：

import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => {return { count: 0 }},// 也可以这样定义// state: () => ({ count: 0 })actions: {increment() {this.count++},},
})

这样就定义好了一个count变量，以后在组件中可以通过以下三种方式修改：

<script setup>
import { useCounterStore } from '@/stores/counter'
const counterStore = useCounterStore()
// 1. 直接修改
counterStore.count++
// 2. 使用$patch批量修改
counterStore.$patch({ count: counterStore.count + 1 })
// 3. 使用action修改
counterStore.increment()
</script>
<template><!-- 直接从 store 中访问 state --><div>Current Count: {{ counter.count }}</div>
</template>

以上三种修改方式的应用场景如下：

1. 如果只要修改一个状态变量，并且不需要额外的操作，那么推荐使用第一种方法。
2. 如果要一次性修改多个状态变量，那么推荐使用$patch方法，效率更高。
3. 如果在修改状态变量的同时要做一些额外的操作，那么推荐第三种方法。

三、一个更真实的例子

import { defineStore } from 'pinia'
export const useTodos = defineStore('todos', {state: () => ({/** @type {{ text: string, id: number, isFinished: boolean }[]} */todos: [],/** @type {'all' | 'finished' | 'unfinished'} */filter: 'all',// 类型将自动推断为 numbernextId: 0,}),getters: {finishedTodos(state) {return state.todos.filter((todo) => todo.isFinished)},unfinishedTodos(state) {return state.todos.filter((todo) => !todo.isFinished)},/*** @returns {{ text: string, id: number, isFinished: boolean }[]}*/filteredTodos(state) {if (this.filter === 'finished') {// 调用其他带有自动补全的 getters ✨return this.finishedTodos} else if (this.filter === 'unfinished') {return this.unfinishedTodos}return this.todos},},actions: {// 接受任何数量的参数，返回一个 Promise 或不返回addTodo(text) {// 你可以直接变更该状态this.todos.push({ text, id: this.nextId++, isFinished: false })},},
})

---