详解vue页面状态持久化详解

目录
  • 代码：
    • 补充：
  • 总结

需求：左树右表。组织树选中某一节点后，进入详情页面，再返回时需要保持选中。其他查询条件也需要保持状态。

思路：用vuex结合localStorage缓存数据。点击树节点或查询按钮时，将数据保存在vuex中，同时存在localStorage中；页面回退时，将存在localStorage中的数据放到vuex中，在页面代码中判断vuex中是否有我们存的数据，有则直接用，没有则默认初始数据。当页面导航路由跳转时再清除缓存的页面数据。

代码：

点击某树节点时，存下id至vuex中。通过dispatch触发action

this.$store.dispatch('SetDeviceFaultId', data.id)

 在vuex的actions中，通过commit 触发 mutations 中的方法

RemoveDeviceFaultId({ commit }) {    //后面清除数据时会用到
    commit('REMOVE_DEVICEFAULTID');
},
SetDeviceManageId({ commit }, id) {
    commit('SET_DEVICEMANAGEID', id);
},

mutations：修改数据

REMOVE_DEVICEFAULTID: (state) => {
      state.devicFaultId = null
      Storage.remove('devicFaultId');
},
SET_DEVICEMANAGEID: (state, deviceManageId) => {
      state.deviceManageId = deviceManageId
      Storage.set('deviceManageId', deviceManageId);
}

state：页面刚创建时从localStorage中拿缓存的数据

devicFaultId: Storage.get('devicFaultId'),

进入某详情页，回退时

this.params.organizeId = this.$store.state.tree.devicFaultId ? this.$store.state.tree.devicFaultId : res.data[0].id;

点击其他路由时，记得清除缓存的数据

this.$store.dispatch('RemoveDeviceFaultId')

补充：

storage.js代码

 在vuex中引入后就可以通过Storage.set使用啦

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Vuex数据持久化实现的思路与代码

    Vuex数据持久化实现的思路与代码

    什么是vuex vuex :是一个专为vue.js开发的状态管理器,采用集中式存储的所有组件状态 五个属性: state.getters.mutations.actions.module 基本使用: 新建store.js文件,最后在main.js中引入,并挂载到实列上 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = {} const getters = {} const mutations = {

  • vuex 第三方包实现数据持久化的方法

    目的: 让在vuex中管理的状态数据同时存储在本地.可免去自己存储的环节. 在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储. 如果有别的模块也需要持久化,也存储在本地 1)首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化. npm i vuex-persistedstate 2)然后:在src/store 文件夹下新建 modules 文件,在 modules 下新建 user.js  和 cart.js

  • vuex实现数据状态持久化

    用过vuex的肯定会有这样一个痛点,就是刷新以后vuex里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的. 所以我们通过 vuex-persistedstate这个插件,来实现将数据存储到本地 用法很简单 1. npm install vuex-persistedstate 2. import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ modules:

  • Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题

    页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到. vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失. vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的.怎么解决呢,我们可以结合本地存储做到数据持久化,也可以

  • vue项目持久化存储数据的实现代码

    方式一.使用localStorage在数据存储 1.要在浏览器刷新的时候重新存储起来 if (window.localStorage.getItem(authToken)) { store.commit(types.SETLOANNUMBER, window.localStorage.getItem('loanNumber')); } 方式二.使用vue-cookie插件来做存储 1.参考地址传送门 2.安装包 npm install vue-cookie --save 3.在store中存储起

  • 详解vue页面状态持久化详解

    详解vue页面状态持久化详解

    目录 代码: 补充: 总结 需求:左树右表.组织树选中某一节点后,进入详情页面,再返回时需要保持选中.其他查询条件也需要保持状态. 思路:用vuex结合localStorage缓存数据.点击树节点或查询按钮时,将数据保存在vuex中,同时存在localStorage中:页面回退时,将存在localStorage中的数据放到vuex中,在页面代码中判断vuex中是否有我们存的数据,有则直接用,没有则默认初始数据.当页面导航路由跳转时再清除缓存的页面数据. 代码: 点击某树节点时,存下id至vuex

  • Vue 页面状态保持页面间数据传输的一种方法(推荐)

    Vue 页面状态保持页面间数据传输的一种方法(推荐)

    如果大家觉得有用,更多的模块请 点击查看 vue router给我们提供了两种页面间传递参数的方式: 动态路由匹配 编程式的导航 // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 下面介绍一下 vue-viewplus 一个简化Vu

  • 详解Vue中状态管理Vuex

    详解Vue中状态管理Vuex

    vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 在vuex出现之前,vue里面的状态是属于'单向数据流'.举个官网的例子: new Vue({ // state data () { return { count: 0 } }, // view template: `<div>{{ count }} </div`, // actions methods: { increment () { this.count++ } } }) 其中 state

  • 详解VUE的状态控制与延时加载刷新

    在实际项目中,我们经常会遇到这种状况,某些数据我们希望等到需要的时候再去获取,或者某些数据我们需要刷新,但是不必立刻刷新,而是延时到展示的时候再去刷新. 在DOM操作的年代,想要实现这样的功能可能会稍微麻烦一些,然而当我们使用数据驱动的mv*框架的时候,这个想要实现这个需求就容易了许多. 当我们理解数据驱动时,我们很容易想到将需要刷新的状态也设置成为某个数据,在需要刷新的地方watch这个数据,当刷新状态发生变动的时候,watch生效并执行刷新的方法,这就实现了延时刷新.而且我们不再需要关注延时

  • 详解vue页面首次加载缓慢原因及解决方案

    第一次打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅.主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载完成会特别的耗时.这里简单总结一下自己用到的一些优化的方案. 首先我们可以安装webpack-bundle-analyzer 插件,通过这个插件我们可以在打包的时候看到打包文件的大小,可以明显的看出哪些文件比较大. 解决方案一 1,去掉编译文件中map文件.在编译好后,我们会看到文件夹下有特别多的.

  • 关于vue里页面的缓存详解

    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 运行结果描述: input输入框内,路由切换输入框内部的内容不会发生改变. 在keep-alive标签内部添加 include:字符串或正则表达式.只有匹配的组件会被缓存 exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. 结合router缓存部分页面: 比较实用的例子: 思路:通过beforeRouterLeave这个钩子来对路由里面的keepAlive进行赋值.从而动态的

  • Vue中状态管理器(vuex)详解以及实际应用场景

    目录 Vue中 常见的组件通信方式可分为三类 Vuex简介 1. State 2. Getters 3. Mutations 4. Actions 5. 使用 mapState.mapGetters.mapActions 简化 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue中 provide.inject 详解及使用 Vue中

  • AJAX页面状态保持思路详解

    传统的页面,浏览器通过url访问页面,页面的内容由后台服务生成页面所有内容再发回给浏览器渲染展示.到AJAX流行的时候,很多信息为AJAX异步请求,比如:点击.翻页等.通常这种情况你一刷新浏览器,当前页面就会重置到初始状态.更不用说把看到的信息url发给好友了. 传统的状态保存在地址栏,如: www.abc.com/search?s=abc&id=23&page=3 如果通过这种方式的话,浏览器会刷新页面,如果使用锚点的话则不会刷新浏览器.具体是点击页面去请求数据的同时会改变地址栏&quo

  • 基于vue cli重构多页面脚手架过程详解

    官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备 使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程 步骤一 改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.

  • Vue页面切换和a链接的本质区别详解

    Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案.在使用Vue-router时候,我们常常会使用其自带的路径跳转组件Link,通过<Link to="path"></Link>实现跳转,这和传统的<a href="path" rel="external nofollow" ></a>何其相似!但它们到底有什么具体的区别呢? 对比<a>,Link组件

随机推荐