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.js最佳实践(五招助你成为vuejs大师)

    Vue.js最佳实践(五招助你成为vuejs大师)

    这篇文章主要介绍了Vue.js最佳实践,本文主要面向对象是有一定vue.js 编辑经验的开发者,需要的朋友可以参考下
    2018-05-05
  • vue-preview动态获取图片宽高并增加旋转功能的实现

    vue-preview动态获取图片宽高并增加旋转功能的实现

    这篇文章主要介绍了vue-preview动态获取图片宽高并增加旋转功能的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 详解vue服务端渲染(SSR)初探

    详解vue服务端渲染(SSR)初探

    本篇文章主要介绍了详解vue服务端渲染(SSR)初探,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue3.0 项目搭建和使用流程

    vue3.0 项目搭建和使用流程

    这篇文章主要介绍了vue3.0 项目搭建和使用流程,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • 一文详解vue2的diff算法流程

    一文详解vue2的diff算法流程

    本篇文章将会尝试从算法的角度主要聊一聊vue2的diff策略,帮助读者朋友在遇到相关的面试题时可以和面试官谈笑风生,文中有相关的图解和代码示例,感兴趣的同学跟着小编一起来看看吧
    2023-08-08
  • vue+echarts图表的基本使用步骤总结

    vue+echarts图表的基本使用步骤总结

    这篇文章主要给大家介绍了关于vue+echarts图表的基本使用步骤,Echarts是一款基于JavaScript的开源可视化图表库,而Vue是一种流行的JavaScript框架,用于构建用户界,需要的朋友可以参考下
    2023-11-11
  • 解决antd 表单设置默认值initialValue后验证失效的问题

    解决antd 表单设置默认值initialValue后验证失效的问题

    这篇文章主要介绍了解决antd 表单设置默认值initialValue后验证失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue中关于element的el-image 图片预览功能增加一个下载按钮(操作方法)

    vue中关于element的el-image 图片预览功能增加一个下载按钮(操作方法)

    这篇文章主要介绍了vue中关于element的el-image 图片预览功能增加一个下载按钮,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue中使用echarts并根据选择条件动态展示echarts图表

    vue中使用echarts并根据选择条件动态展示echarts图表

    虽然老早就看过很多echarts的例子, 但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue中使用echarts并根据选择条件动态展示echarts图表的相关资料,需要的朋友可以参考下
    2023-12-12
  • vue引入组件的几种方法代码示例

    vue引入组件的几种方法代码示例

    vue的一个强大功能就是组件化开发,下面这篇文章主要给大家介绍了关于vue引入组件的几种方法,文中给出了详细的代码及图文介绍,需要的朋友可以参考下
    2024-04-04

最新评论