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. Git 分支 - 远程分支

    Git 分支 - 远程分支 远程分支 远程分支(remote branch)是对远程仓库中的分支的索引.它们是一些无法移动的本地分支:只有在 Git 进行网络交互时才会更新.远程分支就像是书签,提醒着 ...

  2. LockInt

    using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace Game.Lo ...

  3. Codeforces Round #271 (Div. 2) E. Pillars 线段树优化dp

    E. Pillars time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  4. vs2013 报错error C1083: 无法打开包括文件:“gl\glew.h”: No such file or directory\

    vs报错诸如如无法打开“gl\xxx.h”时, 解决方法: 1.去http://glew.sourceforge.net/下载相关文件,2.在下载下来的文件里找到xxx.h,将其复制到vs的相关目录下 ...

  5. 越来越“简单”的Java

    Java,20岁了.从我写下第一行Java代码,迄今已有十余年了,眼见Java——这个当年刚刚找到自己成长方向的懵懂少年,成长为如今当之无愧的业界王者.它已拥有世界上最庞大的开发者社区,以及无可匹敌的 ...

  6. leecode第七十题(爬楼梯)

    class Solution { public: int climbStairs(int n) { vector<unsigned long long> num;//斐波那契数列 num. ...

  7. 《剑指offer》第六十七题(把字符串转换成整数)

    // 面试题67:把字符串转换成整数 // 题目:请你写一个函数StrToInt,实现把字符串转换成整数这个功能.当然,不 // 能使用atoi或者其他类似的库函数. #include <ios ...

  8. vue面试

    1.一个比较全的vue面试题 http://www.bslxx.com/p/3187.html

  9. VNPY回测流程

    又是好久没更新了,2月这一个月,工作上也忙,正好也是过年.加上前一段时间,一直在爬取某眼查的数据. 对VNPY的使用时间就减少了,不过最近还是完成了vnpy回测结构的思维导图.如下: 值得注意的是,v ...

  10. jquey 小记

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象. 回调函数拥有两个参数: 第一个为对象的 ...