一、简介
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
被持久化保存了。
文章到此就结束了,如果有需要作者补充或修正的,欢迎在评论区留言。文章来源:https://www.toymoban.com/news/detail-481380.html
END文章来源地址https://www.toymoban.com/news/detail-481380.html
到了这里,关于Pinia使用方法及持久化存储的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!