vuex使用及持久化方式

 更新时间:2024年08月31日 13:43:33   作者:一块小饼干儿  
这篇文章主要介绍了vuex使用及持久化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、使用

第一步:引入:

第二步:定义:注意有nameSpaced,为模块定义命名空间,避免命名冲突

第三步:使用:

二、vuex state中的数据,刷新时不能保持

例如:

三、如何持久化?

1、利用localStorage,sessionStorage

beforeunload事件:是一个浏览器事件,它在用户尝试离开当前页面(例如,通过关闭标签页、刷新页面或访问另一个 URL)之前触发。

这个事件可以用来提示用户确认离开,或者在用户离开页面时执行一些清理工作。

2、利用vuex-presistedstate

第一步:npm install vuex-persistedstate

第二步:

  • key:存储数据的键
  • paths:需要持久化的状态路径
  • storage:存储方式,可以是 localStorage 或 sessionStorage

以上两步完成后即生效,刷新页面时即是持久化的数据:

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue使用splice()删除数组中的一个数据 弹出窗口提示问题

    vue使用splice()删除数组中的一个数据 弹出窗口提示问题

    这篇文章主要介绍了vue使用splice()删除数组中的一个数据 弹出窗口提示问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue多种弹框的弹出形式的示例代码

    vue多种弹框的弹出形式的示例代码

    本篇文章主要介绍了vue多种弹框的弹出形式的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue 打包体积优化方案小结

    Vue 打包体积优化方案小结

    这篇文章主要介绍了Vue 打包体积优化方案小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • vue中后端做Excel导出功能返回数据流前端的处理操作

    vue中后端做Excel导出功能返回数据流前端的处理操作

    这篇文章主要介绍了vue中后端做Excel导出功能返回数据流前端的处理操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 浅谈关于.vue文件中style的scoped属性

    浅谈关于.vue文件中style的scoped属性

    本篇文章主要主要介绍了浅谈关于.vue文件中style的scoped属性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 如何在Vue中使用protobuf

    如何在Vue中使用protobuf

    这篇文章主要介绍了如何在Vue中使用protobuf,protobuf是由google推出的和语言无关和平台无关,几乎支持当前的大部分语言,如JavaScript,下文更多相关介绍需要的小伙伴可以参考一下
    2022-03-03
  • 前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法例子

    前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法例子

    当我们在开发应用时经常需要对表单进行校验,以确保用户输入的数据符合预期,这篇文章主要给大家介绍了关于前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法的相关资料,需要的朋友可以参考下
    2023-12-12
  • vue3  mark.js 实现文字标注功能(案例代码)

    vue3  mark.js 实现文字标注功能(案例代码)

    这篇文章主要介绍了vue3  mark.js 实现文字标注功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vue 表单输入框不支持focus及blur事件的解决方案

    vue 表单输入框不支持focus及blur事件的解决方案

    这篇文章主要介绍了vue 表单输入框不支持focus及blur事件的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue动态路由刷新失效以及404页面处理办法

    vue动态路由刷新失效以及404页面处理办法

    作为一个前端新手,项目中遇到权限处理时,通常会采用动态添加路由的方法来实现,下面这篇文章主要给大家介绍了关于vue动态路由刷新失效以及404页面处理办法的相关资料,需要的朋友可以参考下
    2023-11-11

最新评论