vue3基础教程之pinia配置和用法
作者：Ares_前端
Vue3项目常用Pinia管理状态,通过安装和配置实现数据持久化,这篇文章主要介绍了vue3基础教程之pinia配置和用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
在 vue3 项目经常使用状态管理器来存储 用户信息、token、路由信息 等数据，vite 项目中使用比较多的一般是 pinia 存储库。
1. 安装pinia
npm install pinia
2. 配置pinia
创建 store 文件夹，在里面创建 index.js ，在 store 下面创建 modules 文件夹，用来管理不同仓库。
index.js文件
使用一个 index 文件进行统一的导出，就不需要在使用多个仓库的时候写多个 import 了。
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下面的仓库文件
// 创建用户信息仓库
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仓库
...
import pinia from '@/store'
app.use(pinia)
...
app.mount('#app')
vue页面的使用
<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 文件中编写。
第一种方法
如果所有仓库中的数据都需要存储的情况下。
import { createPersistedState } from 'pinia-plugin-persistedstate' // 引入方法
pinia.use(createPersistedState({
storage: localStorage,
auto: true // 自动存储所有仓库数据到localStorage
}))
第二种方法
每个仓库单独配置持久化的配置 => 将 auto: true 删除。
在 modules 下面的 user.js 文件中编写。
// 创建用户信息仓库
import { defineStore } from 'pinia'
export const userStore = defineStore('user', () => {
...
...
}, {
// 在这个地方配置持久化
persist: {
... 持久化配置如下
}
})
持久化配置方式如下：
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 插件的使用方式。
总结
到此这篇关于vue3基础教程之pinia配置和用法的文章就介绍到这了,更多相关vue3 pinia配置和用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！