Pinia使用方法及持久化存储

一、简介

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。它跟 Vuex 有一定的相似度，但还是有很大的区别。

愿意看这篇博客的人，想必已经看过了官方文档，官方文档很详细，包含各种使用情景和理论，因此本文不说理论，只说具体的使用方法，想深入研究的建议去看官方文档，本文适合拿来即用。

Pinia 官方文档

二、使用方法

1. 安装

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

2. 引入

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()

createApp(App).use(pinia).mount('#app') // vue3 的简写语法

不熟悉vue3简写语法的可以按照下面的方式去写，效果是一样的

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

3. 创建文件

在 src 文件中，创建 store 文件，里面按模块创建 ts 文件（也可以是 js）。

注意： pinia 不需要创建 modules 文件来区分模块化，这是它和 vuex 的区别。

以登录后保存用户信息模块举例：

注意： 命名方式建议统一规范 use + id + store，示例 useUserStore ，id 为 user。

store/user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: {}
  }),
  actions: {
    SetUserInfo(data: any) {
      this.userInfo = data
    }
  }
})

4. 使用

先引入模块，再将引入的模块对象赋值给变量 store （命名随意），如果不需要修改数据，用 const 声明变量，需要修改数据则使用 let 声明。

注意：引入的模块对象名要与模块中 export const 声明的一致。

.ts or .vue

import { useUserStore } from '@/store/user'

const store: any = useUserStore()

console.log(store.userInfo)

5. 修改数据

修改数据多种方法，可以直接修改，也可以使用 actions 修改。

方法1：直接修改

.ts or .vue

import { useUserStore } from '@/store/user'

const store = useUserStore()

store.userInfo = obj // obj 指新值

方法2：借助 actions 修改

.ts or .vue

import { useUserStore } from '@/store/user'

const store = useUserStore()

store.SetUserInfo(obj) // obj 指新值

方法3：多属性修改

store/user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: null,
    age: null,
    sex: null,
  }),
})

上面的方法都是用来修改单个属性的，如果你需要一次修改多个属性，虽然你可以重复操作上面的方法，但是 pinia 提供了新的方法，我更推荐使用官方推荐的方法。

.ts or .vue

import { useUserStore } from '@/store/user'

const store = useUserStore()

// 你可以这样去修改（不建议）
store.name = '张三'
store.age = 24
store.sex = '男'

// 推荐使用下面这种方式 √
store.$patch({
  name: '张三',
  age: 24,
  sex: '男',
})

修改数据的场景及方法当然不止这些，有些复杂的数据修改仅靠这些是难以实现的，不过本文的目的是简单讲解 pinia 的使用方法，就不多做赘述了，想具体了解推荐去看 Pinia 官方文档。

三、持久化存储

PS：持久化插件推荐文末修正，pinia-plugin-persist 插件在 TypeScript 中出现类型声明问题。不影响使用，但会有预警提示。2023-12-08

pinia 和 vuex 一样，数据是短时的，只要一刷新页面，数据就会恢复成初始状态，为了避免这个问题，可以对其采用持久化保存方法。

持久化保存的原理是在 pinia 中数据更新时，同步保存到 localStorage 或 sessionStorage 中，刷新后从本地存储中读取数据，你可以选择自己去写，但是实现起来并不像想象中那么容易，当然，也没那么难。

我推荐使用插件去实现持久化存储，这样更便捷，省时省力。推荐插件为 pinia-plugin-persist，当然，实现持久化存储的插件肯定不止这一种，想用别的也无所谓，本文仅对这款插件讲解使用方法。

1. 安装插件

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

2. 引入插件

和引入 pinia 一样，在 main.ts 中引入。

mian.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'

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

createApp(App).use(pinia).mount('#app')

3. 使用插件

方式1：默认保存

下面这种写法会将当前模块中的所有数据都进行持久化保存，默认保存在 sessionStorage 中， key 为模块 id，刷新页面不需要手动读取数据，插件会自动读取。

store/user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: null,
    age: null,
    sex: null,
  }),
  persist: {
    enabled: true // true 表示开启持久化保存
  }
})

方式2：设置 key 、指定保存内容

你可以主动设置 key 名，也可以指定哪些数据保存，默认会保存当前模块全部数据。

store/user.ts

export const useUserStore = defineStore('storeUser', {
  state: () => ({
    name: null,
    age: null,
    sex: null,
  }),
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'user',
        storage: localStorage,
        paths: ['name'] 
      },
    ],
  },
})

你甚至可以对不同数据设置不同的本地存储方式。

store/user.ts

export const useUserStore = defineStore('storeUser', {
  state: () => ({
    name: null,
    age: null,
    sex: null,
  }),
  persist: {
    enabled: true,
    strategies: [
      { storage: sessionStorage, paths: ['name'] },
      { storage: localStorage, paths: ['age'] },
    ],
  },
})

方式3：保存到 cookie

保存到 cookie 中当然也是可以的，不过需要手动添加 cookie 的保存方式，同样，此处也是推荐使用插件 js-cookie 来完成。

npm install js-cookie

store/user.ts

import Cookies from 'js-cookie'

const cookiesStorage: Storage = {
  setItem (key, state) {
    return Cookies.set(key, state.accessToken, { expires: 3 }) // 设置有效期 3 天，不设置默认同 sessionStorage 有效期一致
  },
  getItem (key) {
    return JSON.stringify({
      accessToken: Cookies.get(key),
    })
  },
}

export const useUserStore = defineStore('storeUser', {
  state: () => ({
    name: null,
    age: null,
    sex: null,
    accessToken: 'xxxxxxxxx',
  }),
  persist: {
    enabled: true,
    strategies: [
      {
        storage: cookiesStorage,
        paths: ['accessToken'] // cookie 一般用来保存 token
      },
    ],
  },
})

四、2023-12-08更新：持久化存储插件推荐修改

以下内容为 2023-12-08 更新。

pinia-plugin-persist 在 typeScript 中有类型声明问题。推荐插件改为 pinia-plugin-persistedstate。官网地址如下：

pinia-plugin-persistedstate 中文官网

官网的文档非常详细，且使用方法与 pinia-plugin-persist 类似，因此本文不做过多赘述，仅简要描述下使用方法。

1、安装插件

npm i pinia-plugin-persistedstate

2、引入插件

main.ts

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

3、使用插件

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: true,
})

只需要添加 persist: true, 整个 store 都将被持久化存储。

当然也可以指定部分数据持久化，方法如下：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: null,
    age: null,
    sex: null,
    info: {
    	des: null
    }
  }),
  persist: {
    paths: ['name', 'info.des'],
  },
})

这样则只有 name，info.des 被持久化保存了。

---

文章到此就结束了，如果有需要作者补充或修正的，欢迎在评论区留言。

END