npm install vuex-persistedstate

在store.js里

import createPersistedState from 'vuex-persistedstate'
const state = {
user:{},
}
export default new Vuex.Store({
state,
getters,
actions,
mutations,
plugins: [createPersistedState()]//会自动保存创建的状态。刷新还在
});

vuex-persistedstate 使用浏览器的本地存储( local storage )对状态( state )进行持久化。这意味着刷新页面或关闭标签页都不会删除你的数据。

一个很好的例子就是购物车:如果用户不小心关闭了一个标签,他们可以重新打开并回到之前页面的状态。

vuex状态持久化的更多相关文章

  1. nuxt如何处理用户登录状态持久化:nuxtServerInit 页面渲染前的store处理

    vue-cli项目中,我们可以用vuex-persistedstate,它可以使vuex的状态持久化,页面刷新都不会丢失,原理当然是localStorage啦!当然也可以使用vue-cookies进行 ...

  2. android 项目学习随笔十三(ListView实现ITEM点击事件,将已读状态持久化到本地)

    1.因为给LISTVIEW增加了两个头布局,所以在点击事件ITEM索引会增加2,比如原来第一条数据的索引应该为0,增加两个头布局后,它的索引变为        2,为了使LISTVIEW的ITEM在点 ...

  3. vue从入门到进阶:Vuex状态管理(十)

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...

  4. vuex状态管理-数据改变不刷新

    困惑: 在页面初始化的时候,我提交到vuex状态管理,然后在获取的时候获取不到,我找到了出错的地点,并进行了修改,然后可以获取到状态 但是不知道原因? 定义了如下的state const state ...

  5. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  6. vue组件化开发-vuex状态管理库

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...

  7. vuex状态管理demo

    vuex状态管理主要包含四个概念  mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...

  8. 前端Vue框架-vuex状态管理详解

    新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...

  9. 前端技术之:如何在vuex状态管理action异步调用结束后执行UI中的方法

    一.问题的起源 最近在做vue.js项目时,遇到了vuex状态管理action与vue.js方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...

随机推荐

  1. 2.0 vue内置指令与自定义指令

    1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...

  2. 给大一新生学习c程序的一些建议的一些建议

    这是一篇给刚学习c程序的学弟们的一篇日志.如果想学好c程序,以及不想走太多弯路,希望能看一下这篇文章,如果说基础较好,或者说已经是大二,大三,这篇文章不会有什么帮助. 刚转到软件工程系,加了几个新生群 ...

  3. L1-048. 矩阵A乘以B

    水题不多说,直接上代码:#include<stdio.h> using namespace std; int main() { ][]; ][]; int m,n; int x,y; sc ...

  4. [osg][osgEarth][原]基于OE自定义自由飞行漫游器(初级版)

    由于受够了OE的漫游器,想搞个可以在全球飞行的漫游器,所以就做了一个: 请无视我的起名规则······ 类头文件:EarthWalkManipulator.h #pragma once //南水之源 ...

  5. Rxbus的使用

    Rxbus是一种模式,在RxJava中 一.添加依赖 compile 'io.reactivex:rxandroid:1.2.0' compile 'io.reactivex:rxjava:1.1.5 ...

  6. 学习笔记54—均方误差(MSE)和均方根误差(RMSE)和平均绝对误差(MAE)

    https://blog.csdn.net/reallocing1/article/details/56292877 MSE: Mean Squared Error  均方误差是指参数估计值与参数真值 ...

  7. SpringMVC 处理Date类型数据@InitBinder @DateTimeFormat 注解 的使用

    使用SpringMVC的时候,需要将表单中的日期字符串转换成对应JavaBean的Date类型,而SpringMVC默认不支持这个格式的转换,解决方法有两种,如下: 方法一 . 在需要日期转换的Con ...

  8. VIM编辑器和VI编辑器的区别

    vi 和vim 的区别 写在前面:这个两个"东西"着实让我烦恼一阵子,但是自己一直没当回事,但是遇到了好几次再决定彻底把他们搞的明白,一下是我通过查找资料了解到的关于这两个编辑器的 ...

  9. Java 发送SOAP请求调用WebService,解析SOAP报文

    https://blog.csdn.net/Peng_Hong_fu/article/details/80113196 记录测试代码 SoapUI调用路径 http://localhost:8082/ ...

  10. (未完成👃)You Don't Know JS: Scope & Closures (第5章: Scope & Closures)

    Chapter 5: Scope Closure 我们到达这里时,已经对作用域如何工作有了非常健康稳固的理解. 下面,我们转移注意力到一个及其重要,但长期难以理解,几乎是神话中的部分语言:Closur ...