Vue3状态管理Pinia

目录

1 Pinia简介

2 Pinia安装

3 Pinia使用

3.1 导入pinia和pinia-plugin-persistedstate并注册实例

3.2 定义状态数据存储仓库store

3.2.1 定义状态数据state

3.2.2 定义操作状态数据的函数

3.2.3 按需导出store

3.3 使用方法

---

1 Pinia简介

        Pinia是Vue的存储库，允许跨组件/页面共享状态，在Vue应用程序中管理状态数据，允许不同组件共享和使用这些数据。

        但是状态数据可能会随页面关闭或浏览器关闭而丢失，因此需要持久化到本地存储，pinia-plugin-persistedstate就可以将状态数据持久化。

2 Pinia安装

        安装pinia命令：

npm install pinia -S

        安装pinia-plugin-persistedstate命令：

npm install pinia-plugin-persistedstate -S

3 Pinia使用

        以登录的用户token和用户信息管理为例：

3.1 导入pinia和pinia-plugin-persistedstate并注册实例

// 导入pinia实例的函数
import { createPinia } from 'pinia'
// 导入pinia持久化实例的函数
import piniaPersistedState from 'pinia-plugin-persistedstate'
// 创建pinia实例
const pinia = createPinia()
pinia.use(piniaPersistedState)
// 导出pinia实例
export default pinia

3.2 定义状态数据存储仓库store

3.2.1 定义状态数据state

// 状态数据
const state = () => ({token: '',userInfo: {}
})

        state是定义的状态数据，包括两个状态：token和userInfo，这两个状态全局共享。

3.2.2 定义操作状态数据的函数

// actions定义操作状态数据的一系列函数
const actions = {// 设置pinia中的token,同时会持久化到本地local storagesetToken(token) {this.token = token},// 移除pinia中的Token,同时移除本地local storage的TokenremoveToken() {this.token = ''},// 设置pinia中的登录用户信息，同时会持久化到本地local storagesetUserInfo(userInfo) {this.userInfo = userInfo},// 移除pinia中的登录用户信息,同时移除本地local storage的登录用户信息removeUserInfo() {this.userInfo = {}},// 登录 actionloginAction({ phone, password }) {return new Promise((resolve, reject) => {// 调用登录接口loginApi({ phone, password }).then((res) => {this.setToken(res.accessToken)resolve()// 注意：因为使用了pinia状态持久化插件，因此当数据存储在pinia中的时候，也会在本地存储一份该数据// pinia中的数据是保存在内存中（临时存储），页面刷新后数据就丢失了；只有把数据存储在本地，这样的话，数据刷新才不丢失。// 今后操作数据的原则（原则依据：pinia持久化插件帮我们实现了）：// 1. 无论是获取数据还是修改数据，一律操作的都是 pinia 中的数据；因为当 pinia 中的数据发生变化了，本地存储中的数据会同步发生变化// 2. 当页面刷新的时候，插件会自动将本地存储中的数据给 pinia 中的数据赋值，从而保证了 pinia 中的数据刷新不丢失}).catch((error) => {reject(error)})})},// 获取用户信息 actiongetUserInfoAction() {return new Promise((resolve, reject) => {// 发请求getUserInfoApi().then((userInfo) => {this.setUserInfo(userInfo)resolve()}).catch((error) => {reject(error)})})},// 退出 actionlogoutAction() {this.removeToken()this.removeUserInfo()}
}

        actions是一系列的操作state的方法，通过this可获取当前store实例对象。

3.2.3 按需导出store

// 按需导出状态数据仓库user
export const useUserStore = defineStore('user', {state,actions,persist: true // 持久化
})

        这里导出了一个名为user的Pinia仓库store，包含状态数据state、操作函数actions，persist属性为true表示持久化。

        注意： pinia中的数据是保存在内存中（临时存储），页面刷新数据就丢失后了。只有把数据存储在本地，这样的话，数据刷新才不丢失。

        persist即是因为使用了pinia状态持久化插件，因此当数据存储在pinia中的时候，也会在本地存储一份该数据。在该插件作用下，操作数据的原则如下：
          1. 无论是获取数据还是修改数据，一律操作的都是 pinia 中的数据；因为当 pinia 中的数据发生变化了，本地存储中的数据会同步发生变化
          2. 当页面刷新的时候，插件会自动将本地存储中的数据给 pinia 中的数据赋值，从而保证了 pinia 中的数据刷新不丢失。

3.3 使用方法

        在需要用到Pinia中的状态数据的组件导入Pinia实例，直接使用实例的操作数据的函数即可：

  import { useUserStore } from '@/stores'const userStore = useUserStore()