Vuex持久化插件(vuex-persistedstate)

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

为什么使用持久化

目的: 让在vuex中管理的状态数据同时储存在本地。可免去自己储存的环节。

  • 在开发的过程中,像用户信息(名字,头像,token)需要vuex中储存且需要本地储存
  • 再例如,购物车如果需要未登录状态下也支持,如果管理在vuex中页面需要储存在本地

使用步骤

1. 首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化

npm i vuex-persistedstate

2. 然后:在src/store 文件夹下新建 modules 文件,在 modules 下新建 user.jscart.js和category.js 三个模块。 (根据项目需求创建)

Vuex持久化插件(vuex-persistedstate)

3. 继续:在 src/store/index.js 中导入 user cart 模块。

import user from './modules/user'
import cart from './modules/cart'
import category from './modules/category'

4. 最后:使用vuex-persistedstate插件来进行持久化

import { createStore } from 'vuex'
// 引入vuex持久化方法createPersistedState
import createPersistedState from 'vuex-persistedstate'
import user from './modules/user'
import cart from './modules/cart'
import category from './modules/category'

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules: {
    // 模块化数据
    user,
    cart,
    category
  },
  plugins: [
    // veux持久化配置
    createPersistedstate({
      key: 'rabbitstore-client',
      paths: ['user', 'cart']
    })
  ]
})

注意:

===> 默认是存储在localStorage中

===> key是存储数据的键名

===> paths是存储state中的那些数据,如果是模块下具体的数据需要加上模块名称,如user.token

===> 修改state后触发才可以看到本地存储数据的的变化。、

效果演示

测试: user模块定义一个mutation在main.js去调用下,观察浏览器application的localStorage下数据。

<template>
  <div class="layout">
    <p>用户的userName为: {{$store.state.user.profile.account}}</p>
    <!-- 触发user模块下的方法修改数据 -->
    <button @click="$store.commit('user/setUser',{account:'张三'})">修改user模块的数据</button>
  </div>
</template>

<script>
// import { useStore } from 'vuex'
export default {
  name: 'Layout',
  setup () {
    // 在setup中获取使用vuex仓库
    // const store = useStore()
  }
}
</script>

我们打开调式工具可以看到我们可以看到我们没有修改数据时本地储存是空的 

Vuex持久化插件(vuex-persistedstate)

 当我们点击修改后 我们模块中的数据就被保存在了本地储存里面

Vuex持久化插件(vuex-persistedstate)

 我么在刷新网页数据依旧保持在那里文章来源地址https://www.toymoban.com/news/detail-400344.html

到了这里,关于Vuex持久化插件(vuex-persistedstate)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【Vue】pinia 数据持久化插件 pinia-plugin-persistedstate 使用

    刷新浏览器后,重新加载页面时会重新初始化 vue、 pinia,而 pinia 中状态的值仅在内存中存在,而刷新导致浏览器存储中的数据就没了。 在实际开发中,浏览器刷新时,有些数据希望是保存下来的。如用户登录后,用户信息会存储在全局状态中,如果不持久化状态,那么每次

    2024年02月07日
    浏览(42)
  • 【pinia持久化存储】使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储

    使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储。 存储方式 : localStorage sessionStorage pinia-plugin-persistedstate 中文官网 pinia 中文官网 安装和使用 pinia ,请参考使用pinia文章。 安装 pinia-plugin-persistedstate : 使用前先将 pinia-plugin-persistedstate添加到pinia实例上。 在添加的时

    2023年04月17日
    浏览(44)
  • 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日
    浏览(36)
  • 如何在 uniapp 里面使用 pinia 数据持久化 (pinia-plugin-persistedstate)

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

    2024年02月08日
    浏览(30)
  • IntelliJ IDE 插件开发 | (二)UI 界面与数据持久化

    IntelliJ IDE 插件开发 |(一)快速入门 IntelliJ IDE 插件开发 |(二)UI 界面与数据持久化 IntelliJ IDE 插件开发 |(三)消息通知与事件监听 IntelliJ IDE 插件开发 |(四)来查收你的 IDEA 使用报告吧 IntelliJ IDE 插件开发 |(五)VFS 与编辑器 在上一篇文章中介绍了在 IDEA 下开发、运行和

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

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

    2024年02月13日
    浏览(34)
  • Redis两种持久化方案RDB持久化和AOF持久化

    Redis持久化 Redis有两种持久化方案: RDB持久化 AOF持久化 1.1.RDB持久化 RDB全称Redis Database Backup file(Redis数据备份文件),也被叫做Redis数据快照。简单来说就是把内存中的所有数据都记录到磁盘中。当Redis实例故障重启后,从磁盘读取快照文件,恢复数据。快照文件称为RDB文件

    2024年02月14日
    浏览(49)
  • redis持久化【RDB+AOF】持久化双雄

    这是redis系列文章之《redis持久化【RDB+AOF】持久化双雄》,上一篇文章【redis基础】redis的十大数据类型_努力努力再努力mlx的博客-CSDN博客 感谢大家的支持~ 目录 RDB 什么是RDB RDB的作用 配置文件关于RDB部分  6vs7 操作步骤 修改配置文件(本案例设置5s修改2次) 修改dump文件的保

    2024年02月08日
    浏览(73)
  • RabbitMQ系列(8)--实现RabbitMQ队列持久化及消息持久化

    概念:在上一章文章中我们演示了消费者宕机的情况下消息没有被消费成功后会重新入队,然后再被消费,但如何保障RabbitMQ服务停掉的情况下,生产者发过来的消息不会丢失,这时候我们为了消息不会丢失就需要将队列和消息都标记为持久化。 1、实现RabbitMQ队列持久化 只需

    2024年02月09日
    浏览(37)
  • 全面解析 Redis 持久化:RDB、AOF与混合持久化

    前言: 每次你在游戏中看到玩家排行榜,或者在音乐应用中浏览热门歌单,有没有想过这个排行榜是如何做到实时更新的?当然,依靠 Redis 即可做到。 在技术领域,我们经常听到 「键值存储」 这个词。但在 Redis 的世界里,这只是冰山一角。Redis 的对象,不仅仅是简单的数据

    2024年03月10日
    浏览(63)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包