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


Posted in Javascript onOctober 01, 2018

方式一、使用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中存储起来

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)
var VueCookie = require('vue-cookie');

export default new Vuex.Store({
state: {
 token: VueCookie.get('token')
},
mutations: {
 saveToken(state, token) {
  state.token = token;
  // 设置存储
  VueCookie.set('token', token, { expires: '30s' });
 }
},
actions: {

}
})

4、在登录页面中设置到存储中

import { mapMutations } from 'vuex';
export default {
methods: {
 login() {
  this.saveToken('123')
 },
 ...mapMutations(['saveToken'])
}
};

方式三、使用vuex-persistedstate插件参考文件

在做大型项目,很多数据需要存储的建议使用这种方式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 #Javascript
在create-react-app中使用sass的方法示例
Oct 01 #Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 #Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 #Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 #Javascript
angularJs中$scope数据序列化的实例
Sep 30 #Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 #Javascript
You might like
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
jquery自定义表格样式
2015/11/23 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
python合并同类型excel表格的方法
2018/04/01 Python
python3使用GUI统计代码量
2019/09/18 Python
python可视化实现KNN算法
2019/10/16 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
劳资人员岗位职责
2013/12/19 职场文书
个人合伙协议书范本
2014/10/14 职场文书
教师先进个人材料
2014/12/17 职场文书
同学会邀请函模板
2015/01/30 职场文书
Python的这些库,你知道多少?
2021/06/09 Python
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android