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中存储起来

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插件参考文件

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuex的使用及持久化state的方式详解

    vuex的使用及持久化state的方式详解

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 当我们接触vuex的时候,这是我们最先看到的一句官方引导. 从这句话中,我们可以得到如下几个信息: 1.vuex是一个为vue而存在的特化的Flux,如同数据库中的弱实体一样,离开了vue,vuex就用不了.反之可以看到redux就不存在,无论是vue还是react,redux都可以使用.所以这里体现的vuex的"特性",redu

  • mpvue中配置vuex并持久化到本地Storage图文教程解析

    # 配置vuex和在vue中相同,只是mpvue有一个坑,就是不能直接在new Vue的时候传入store. 步骤: 1.在src目录下新建一个store目录,结构如下(官方推荐:  vuex.vuejs.org/zh-cn/struc-) 2. 在main.js中引入你的store, 并绑定到Vue构造函数的原型上,这样在每个.vue的组件都可以通过this.$store访问store对象. 3. ok,可以使用了.我说一下vuex官方推荐的使用方案(可适应大型应用). 首先在mutation

  • weex里Vuex state使用storage持久化详解

    在weex里使用Vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化state. 先看下该模块介绍: storage 是一个在前端比较常用的模块,可以对本地数据进行存储.修改.删除,并且该数据是永久保存的,除非手动清除或者代码清除.但是,storage 模块有一个限制就是浏览器端(H5)只能存储小于5M的数据,因为在 H5/Web 端的实现是采用 HTML5 LocalStorage API.而 Andro

  • 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使用localStorage存储数据的方法

    本文实例为大家分享了Vue使用localStorage存储数据的具体代码,供大家参考,具体内容如下 通过下面这个案例来了解localStorage的基本使用方法. 输入评论人.评论内容,点击发表评论,评论数据将保存到localStorage中,并刷新评论列表. 1.先组织出一个最新评论数据对象  var comment = {id:Date.now(), user:this.user, content:this.content} 2. 把得到的评论对象,保存到localStorage中  1.l

  • Spring Data JPA实现持久化存储数据到数据库的示例代码

    Spring Data JPA实现持久化存储数据到数据库的示例代码

    目录 1.SpringBoot项目整合JPA 1.1 pom.xml依赖 1.2 application配置文件 2.创建实体类 3.启动项目,测试验证 1.SpringBoot项目整合JPA 1.1 pom.xml依赖 <properties> <java.version>1.8</java.version> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &

  • vue项目中存储与使用后端传递过来的token

    目录 前言 后端关于token的设置 前端页面取用token token存储 前端使用token实现路由守卫 请求拦截和响应拦截 总结 前言 以前一直都是在postman中测试验证token,现在用在真正的项目中,记录一下在vue项目中token的存储和使用 后端关于token的设置 app.js中需要设置token的地方 const expressJWT = require('express-jwt') const app = express(); const config = require

  • 使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

    在终端中运行以下命令: vue create xxx // xxx为项目名称,例如 vue-project 然后,系统会提示我们选择默认预设或手动选择功能.使用向下箭头键,我们手动选择功能,然后按Enter键. 然后,我们将看到一系列功能选项.使用向下箭头键,我们将向下移动并使用空格键选择需要的功能,然后按回车键. Linter / Formatter 就是代码风格. 我们将使用 ESLint + Prettier 我们将在保存时添加Lint的附加功能. 我们将选择单独的配置文件. 我们可以选择

  • 关于vue项目中搜索节流的实现代码

    我们经常会遇到这种需求,现在我们在使用百度搜索的时候他们的思想也是 根据防抖节流而实现的,至于用防抖还是节流根据自己需求. <template> <input type="text" v-model.trim="sse"> </template> <script> const delay = (function () { let timer = 0 return function (callback, ms) { cl

  • vue项目中data数据之间互相访问的实现

    vue项目中data数据之间互相访问的实现

    如下代码: <div id="vue_det"> <input type="number" v-model="text"> <div>{{textAdd}}</div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { text: 1, tex

  • 在vue项目中使用codemirror插件实现代码编辑器功能

    在vue项目中使用codemirror插件实现代码编辑器功能

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示),具体内容如下所示: 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 <template> <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;&quo

  • vue+springmvc导出excel数据的实现代码

    vue端处理 this.$http.get(this.service + '/user/excel',{responseType: 'blob'}).then(({data})=> { console.info(typeof data) var a = document.createElement('a'); var url = window.URL.createObjectURL(data); a.href = url; a.download = '用户统计信息.xls'; a.click()

  • vue项目中极验验证的使用代码示例

    使用vue.react的项目获取数据.上传数据.注册.登陆等都是通过接口来完成的,接口很容易被人恶意调用,最容易被人恶意调用的接口就是注册.登陆类的接口,为了防止接口被恶意调用很多公司开发了出了很多的人机验证的工具,今天就来讲下极验验证在vue项目中的使用. 效果预览 1.遇到的问题 在项目中任何一个页面或vue组件都有可能需要使用到极验,并且极验在初始化时需要传递一些参数,要怎么做才能做到每一个组件都能很方便的使用极验呢? 极验应该在什么时候初始化?是组件一加载就初始化还是用户点击按钮后再初始

随机推荐