【Vue全家桶】Pinia状态管理

写在前面

🤗这里是前端程序员小张！

🌻人海茫茫               ，感谢这一秒你看到这里               。希望我的文章对你的有所帮助！

🌟愿你在未来的日子  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，保持热爱














，奔赴山海！

一
  
  
  
  
  
  
  
 、认识Pinia

1.1 认识Pinia

Pinia开始于大概2019年
  
  
  
  
  
  
  
 ，其目的是设计一个拥有 组合式 API 的 Vue 状态管理库 目前同时兼容Vue2 
  
  
  
  
  
  
  、Vue3  
  
  
  
  
  
  
 ，也并不要求你使用Composition API Pinia本质上依然是一个状态管理库
 


 


 


 


 


 


 


 
，用于跨组件 


 


 


 


 


 


 


 

、页面进行状态共享

状态管理库是什么？

是一个保存状态和业务逻辑的实体
 
 
 
 
 
 
 
，它会持有为绑定到你组件树的状态和业务逻辑   
   
   
   
   
   
   
  ，也就是保存了全局的状态； 它有点像一个永远存在的组件
 

 

 

 

 

 

 

 
，每个组件都可以读取和写入它； 你可以在你的应用程序中定义任意数量的Store来管理你的状态；

应该在什么时候使用 Store?

一个 Store 应该包含可以在整个应用中访问的数据  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
。这包括在许多地方使用的数据

 

 

 

 

 

 

 
，例如显示在导航栏中的用户信息                ，以及需要通过页面保存的数据
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，例如一个非常复杂的多步骤表单














。 另一方面














，应该避免在 Store 中引入那些原本可以在组件中保存的本地数据                       ，例如 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，一个元素在页面中的可见性
  
  
  
  
  
  
  
 。

安装：npm install pinia

1.2 为什么使用Pinia？

使用 Pinia






















，即使在小型单页应用中               ，你也可以获得如下功能：

Devtools 支持 追踪 actions
 
 
 
 
 
 
 
、mutations 的时间线 在组件中展示它们所用到的 Store 让调试更容易的 Time travel 热更新 不必重载页面即可修改 Store 开发时可保持当前的 State 插件：可通过插件扩展 Pinia 功能 为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能  
  
  
  
  
  
  
 。 支持服务端渲染

二  
   
   
   
   
   
   
   、 Store

Store有三个核心概念：

state 

 

 

 

 

 

 

 
、getters

 

 

 

 

 

 

 

、actions； 等同于组件的data               、computed 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 、methods； 一旦 store 被实例化  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，你就可以直接在 store 上访问 state















、getters 和 actions 中定义的任何属性；

2.1 定义Store

Store 是用 defineStore() 定义的

它需要一个唯一名称














，作为第一个参数传递 这个名字 
  
  
  
  
  
  
  
 ，也被用作 id   
  
  
  
  
  
  
 ，是必须传入的
 


 


 


 


 


 


 


 
， Pinia 将用它来连接 store 和 devtools
 


 


 


 


 


 


 


 
。 返回的函数统一使用useX作为命名方案
 
 
 
 
 
 
 
，这是约定的规范 defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象 import { defineStore } from pinia // 你可以对 `defineStore()` 的返回值进行任意命名   
   
   
   
   
   
   
  ，但最好使用 store 的名字
 

 

 

 

 

 

 

 
，同时以 `use` 开头且以 `Store` 结尾
 
 
 
 
 
 
 
。 // 第一个参数是你的应用中 Store 的唯一 ID   
   
   
   
   
   
   
  。 export const useCounterStore = defineStore(counter, { // 其他配置... })

2.2 Option对象

我们也可以传入一个带有 state                      、actions 与 getters 属性的 Option 对象：

我们可以认为 state 是 store 的数据 (data) getters 是 store 的计算属性 (computed) 而 actions 则是方法 (methods) export const useCounterStore = defineStore(counter, { state: () => ({ count: 0 }), getters: { double: (state) => state.count * 2, }, actions: { increment() { this.count++ }, }, })

2.3 setup函数

与 Vue 组合式 API 的 setup 函数 相似

我们可以传入一个函数

 

 

 

 

 

 

 
，该函数定义了一些响应式属性和方法 并且返回一个带有我们想暴露出去的属性和方法的对象 在 Setup Store 中： ref() 就是 state 属性 computed() 就是 getters function() 就是 actions export const useCounterStore = defineStore(counter, () => { const count = ref(0) function increment() { count.value++ } return { count, increment } })

2.4 使用定义的Store

Store在它被使用之前是不会创建的                ，我们可以通过调用**useStore()**来使用Store：

<script setup> import { useCounterStore } from @/stores/counter const store = useCounterStore() </script> 一旦 store 被实例化
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，你可以直接访问在 store 的 state 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 、getters 和 actions 中定义的任何属性
 

 

 

 

 

 

 

 
。 注意Store获取到后不能被解构














，那么会失去响应式： 为了从 Store 中提取属性同时保持其响应式                       ，您需要使用storeToRefs()

 

 

 

 

 

 

 
。

三






















、Pinia核心概念State

3.1 定义State

state 是 store 的核心部分 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，因为store是用来帮助我们管理状态的

在 Pinia 中






















，状态被定义为返回初始状态的函数 import { defineStore } from pinia export const useCounter = defineStore(counter, { // 为了完整类型推理               ，推荐使用箭头函数 state: () => { return { // 所有这些属性都将自动推断出它们的类型 counter: 0 } } })

3.2 操作State

读取和写入State：

默认情况下  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，您可以通过 store 实例访问状态来直接读取和写入状态 const counterStore = useCounter() counterStore.counter++

重置State

你可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值 const counterStore = useCounter() counterStore.$reset()

变更State

除了用 store.count++ 直接改变 store














，你还可以调用 $patch 方法 它允许你用一个 state 的对象在同一时间更改多个属性 counterStore.$patch({ counter : 1, age: 120, name: pack, })

3.3 使用选项式 API 的用法

// 示例文件路径： // ./src/stores/counter.js import { defineStore } from pinia const useCounterStore = defineStore(counter, { state: () => ({ count: 0, }), })

四               、Pinia核心概念Getters

4.1 认识Getters

Getters 完全等同于 store 的 state 的计算属性

可以通过 defineStore() 中的 getters 属性来定义它们                。 推荐使用箭头函数
  
  
  
  
  
  
  
 ，并且它将接收 state 作为第一个参数 export const useCounter = defineStore(counter, { state: () => ({ counter: 15 }), getters: { doubleCounter: (state) => state.counter * 2 } })

4.2 访问Getters

访问当前store 实例上的 getters

const counterStore = useCounter() console.log(counterStore.doubleCounter)

Getters中访问当前store实例的其他Getters

我们可以通过 this  
  
  
  
  
  
  
 ，你可以访问到其他任何 getters getters: { doubleCount: (state) => state.counter * 2, // 返回 counter 的值乘以 2 加 1 doubleCountPlusOne() { return this.doubleCount + 1 } }

访问其他store实例的Getters

getters: { otherGetter(state) { const otherStore = useOtherStore() return state.localData + otherStore.data } }

4.3 向Getters传递参数

Getters可以 返回一个函数
 


 


 


 


 


 


 


 
，该函数可以接受任意参数：

export const useUserListStore = defineStore(main, { state: () => ({ users: [ { id: 1, name: lisa }, { id: 2, name: pack } ] }), getters: { getUserById: (state) => { return (userId) => { state.users.find((user) => user.id === userId) } } } })

在组件中使用：

<template> <p>User 2: {{ getUserById(2) }}</p> </template> <script setup> import { useUserListStore } from ./store const userList = useUserListStore() const { getUserById } = storeToRefs(userList) </script>

五 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 、Pinia核心概念Actions

5.1 认识Actions

Actions 相当于组件中的 methods
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
。

可以通过 defineStore() 中的 actions 属性来定义
 
 
 
 
 
 
 
，并且它们也是定义业务逻辑的完美选择














。

类似 Getters   
   
   
   
   
   
   
  ，Actions 也可通过 this 访问整个 store 实例

export const useCounterStore = defineStore(counter, { state: () => ({ counter: 15 }), actions: { increment() { this.counter++ } } })

5.2 Actions执行异步操作

Actions 中是支持异步操作的
 

 

 

 

 

 

 

 
，并且我们可以编写异步函数

 

 

 

 

 

 

 
，在函数中使用await：

actions: { increment() { this.counter++ }, async fetchDataAction() { const res = await fetch("http://jsonplaceholder.typicode.com/posts") const data = await res.json() return data } }

Actions 可以像函数或者通常意义上的方法一样被调用：

<script setup> import { useCounterStore } from ./store/couter; const counterStore = useCounterStore() counterStore.fetchDataAction().then(res => { console.log(res) }) </script>

5.3 访问其他 store 的 Actions

import { useAuthStore } from ./auth-store export const useSettingsStore = defineStore(settings, { state: () => ({ preferences: null, // ... }), actions: { async fetchUserPreferences() { const auth = useAuthStore() if (auth.isAuthenticated) { this.preferences = await fetchPreferences() } else { throw new Error(User must be authenticated) } }, }, })