pinia和pinia-plugin-persistedstate的配置和用法

在 vue3 项目经常使用状态管理器来存储 用户信息、token、路由信息 等数据，vite 项目中使用比较多的一般是 pinia 存储库。

1. 安装pinia

npm install pinia

2. 配置pinia

创建 store 文件夹，在里面创建 index.js ，在 store 下面创建 modules 文件夹，用来管理不同仓库。

index.js文件

使用一个 index 文件进行统一的导出，就不需要在使用多个仓库的时候写多个 import 了。

js 复制代码

import { createPinia } from "pinia";
// 导出modules下面的所有仓库
import { userStore } from "./modules/user"
...
...

const pinia = createPinia()

// 组合api添加$reset方法，用于重置状态
pinia.use(({ store }) => {
  const initialState = JSON.parse(JSON.stringify(store.$state))
  store.$reset = () => {
    store.$patch(initialState)
  }
})

export default pinia

export { userStore }

组合api的写法是没有重置功能的，需要单独写一个 $reset 的方法重置数据。

modules下面的仓库文件

js 复制代码

// 创建用户信息仓库
import { defineStore } from 'pinia'
export const userStore = defineStore('user', () => {
  let name = ref('张三')
  let age = ref(18)
  let obj = reactive({
    username: '韩梅梅',
    address: '北京'
  })

  const changeName = (val) => {
    name.value = val
  }

  return {
    name,
    age,
    obj,
    changeName
  }
})

main.js中引入pinia仓库

js 复制代码

...
import pinia from '@/store'
app.use(pinia)
...

app.mount('#app')

vue页面的使用

html 复制代码

<template>
  <div>
    <div>{{ user.name }}</div>
    <el-button type="primary" @click="changeName1">修改姓名</el-button>
    <div>{{ age }}</div>
    <el-button type="primary" @click="changeName2">修改年龄</el-button>
  </div>
</template>

<script setup>
import { userStore } from '@/store'
import { storeToRefs } from 'pinia' 
const user = userStore()

// 修改里面的值有3种写法
const changeName1 = () => {
  // 第一种 => 直接赋值
  user.name = '李四'
  // 第二种 => 使用$patch
  user.$patch({
    name: '李四'
  })
  // 第三种 => 使用仓库里面的方法
  user.changeName('李四')
};


// 如果是使用解构的方式取值的话需要使用这个方法,否则取出来的值不是响应式的
let { age } = storeToRefs(user)
// 修改年龄
const changeName2 = () => {
    age.value++
}

// 使用重置方法
const reset = () => {
  user.$reset();
}
</script>

storeToRefs 这个方法是修改解构赋值的方法从仓库取值，让取出来的值也是响应式的。

3. 持久化的插件使用

存储在仓库的数据如果刷新页面会丢失，之前都是手动将每个值存到本地存储中 localStorage 或者sessionStorage 种。pinia-plugin-persistedstate 插件是让仓库中的数据自动存储到本地存储中。

4. pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

5. 配置持久化插件

在 store 下面的 index.js 文件中编写。

第一种方法

如果所有仓库中的数据都需要存储的情况下。

js 复制代码

import { createPersistedState } from 'pinia-plugin-persistedstate' // 引入方法
pinia.use(createPersistedState({  
    storage: localStorage, 
    auto: true  // 自动存储所有仓库数据到localStorage
}))

第二种方法

每个仓库单独配置持久化的配置 => 将 auto: true 删除。

在 modules 下面的 user.js 文件中编写。

js 复制代码

// 创建用户信息仓库
import { defineStore } from 'pinia'
export const userStore = defineStore('user', () => {
  ...
  ...
}, {
  // 在这个地方配置持久化
  persist: {
    ... 持久化配置如下
  }
})

持久化配置方式如下：

js 复制代码

1. 第一种配置
persist： true  // 整个仓库持久化

2. 第二种配置 (pick 和 omit 二选一)
persist: {
    pick: ['obj.username', 'name'],  // 存储哪些
    omit: ['obj.address']  // 忽略哪些不存储
}

3. 第三种配置
persist: {
    storage: sessionStorage 存储的位置
}

4. 第四种配置
persist: {
    key: 'my-userinfo' 存储的名称
}

5. 第五种配置 (一个仓库每个参数不同的存储方式)
persist: [
    {
      pick: ['name'],
      storage: localStorage,
      key: 'name'
    },
    {
      pick: ['age'],
      storage: sessionStorage,
      key: 'age'
    }
]

以上就是 pinia 和 pinia-plugin-persistedstate 插件的使用方式。