Pinia使用方法及持久化存储

这篇具有很好参考价值的文章主要介绍了Pinia使用方法及持久化存储。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、简介

PiniaVue 的专属状态管理库,它允许你跨组件或页面共享状态。它跟 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 的区别。

Pinia使用方法及持久化存储

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

注意: 命名方式建议统一规范 use + id + store,示例 useUserStoreiduser

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

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

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

我推荐使用插件去实现持久化存储,这样更便捷,省时省力。推荐插件为 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'],
  },
})

这样则只有 nameinfo.des 被持久化保存了。


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

END文章来源地址https://www.toymoban.com/news/detail-481380.html

到了这里,关于Pinia使用方法及持久化存储的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何在 uniapp 里面使用 pinia 数据持久化 (pinia-plugin-persistedstate)

    想要在 uniapp 里面使用 pinia-plugin-persistedstate 会遇到的问题就是 uniapp里面没有浏览器里面的 sessionStorage localStorage 这些 api 。 我们只需要替换掉 pinia-plugin-persistedstate 默认的储存 api 就可以了。使用 createPersistedState 重新创建一个实例, 把里面的 storage 的参数修改为对应的 uniapp

    2024年02月08日
    浏览(29)
  • Kali Live Boot把Kali 装在U盘(不想重装电脑使用kali的方法)并持久化 详细

    我只有一台电脑,又想用kali,那只能在虚拟机安装使用了,但是呢在虚拟机又不能使用电脑的硬件,比如无线网卡,当然另外买的除外,我说的是笔记本自带的网卡。而用这个方法就相当于在你的电脑上装了kali,但是又不会影响你之前用的系统。另外你还可以带着你的kali去网

    2024年02月05日
    浏览(40)
  • 前端开发小技巧 - 【Vue3 + TS】 - 在 TS + Vue3 中使用 Pinia,实现 Pinia 的持久化,优化Pinia(仓库统一管理)

    ts 中使用 pinia 和 Vue3 基本一致,唯一的不同点在于,需要根据接口文档给 state 标注类型,也要给 actions 标注类型; 以下都是 组合式API 的写法, 选项式API 的写法大家可以去官网看看; Pinia; 持久化插件 - pinia-plugin-persistedstate; 目标文件: src/types/user.d.ts (这里以 user.d.t

    2024年04月09日
    浏览(52)
  • Pinia 数据持久化储存(pinia-plugin-persistedstate)

    插件官网地址: https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html 这里对插件的安装就不多赘述了,放两张官网的截图 使用命令:npm i pinia-plugin-persistedstate (1)将store的state中的全部数据进行缓存,直接在state同级下面添加persist对象 此时,默认将数据存放在浏览器的

    2024年02月01日
    浏览(35)
  • pinia数据持久化,解决刷新state数据丢失

    下载插件 插件 pinia-plugin-persist 可以辅助实现数据持久化功能。 安装插件 在入口文件main.js中 配置数据持久化 数据已经存储到了本地

    2024年02月11日
    浏览(42)
  • 【k8s存储--使用OpenEBS做持久化存储】

    使用OpenEBS,你可以将有持久化数据的容器,像对待其他普通容器一样来对待。OpenEBS本身也是通过容器来部署的,支持Kubernetes、Swarm、Mesos、Rancher编排调度,存储服务可以分派给每个pod、应用程序、集群或者容器级别,包括: 跨节点的数据持久化 跨可用区和云厂商的数据同步

    2024年04月23日
    浏览(34)
  • uniapp项目实战第五章:小程序Pinia持久化

    说明:项目中 Pinia 用法平时完全一致,主要解决持久化插件 兼容性 问题。 持久化存储插件 持久化存储插件: pinia-plugin-persistedstate 插件默认使用 localStorage 实现持久化,小程序端不兼容,需要替换持久化 API。 网页端持久化 API 多端持久化 API 参考代码 现在可以持续化了

    2024年02月01日
    浏览(41)
  • Vue3状态管理库Pinia——自定义持久化插件

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月13日
    浏览(34)
  • K8S使用持久化卷存储到NFS(NAS盘)

    参考文章:K8S-v1.20中使用PVC持久卷 - 知乎 目录 1、概念: 1.1 基础概念 1.2 PV的配置 1.2.1 静态PV配置 1.2.2 动态PV配置 1.2.3 PVC与PV的绑定 1.2.4 PVC及PV的使用 2 部署PV及PVC 2.1 所有K8S机器都需要安装NFS程序 2.2 仅针对需要暴露文件服务的机器开启NFS服务         2.2.1 Linux为例开启NFS服

    2023年04月26日
    浏览(52)
  • Docker Desktop使用宿主机Windows的配置文件持久化存储数据

    《微软官网Windows 上的 Docker 引擎帮助文档》 以Nginx为例 把Nginx的配置文件复制到Windows 注意:Windows的盘符是小写的,以及目录直接是用反斜杠的!(我掉这坑里好久!!!) 修改宿主机的nginx.conf配置文件 删除nginx容器 重启启动一个新的Nginx容器 访问localhost

    2024年02月09日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包