vuex配合本地Cookies数据持久化

下载js-cookie
一个简单，轻量级的JavaScript API，用于处理浏览器cookie。cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息，比如当前已经登录过的状态、登录以后的用户信息等等

yarn add js-cookie --S

src/utils/auth.js

// 专门用来操作cookie的方法包
// 内部封装了繁琐的操作方法 参数处理 暴露三个函数 get,set,remove
import Cookies from 'js-cookie'//引入const TokenKey = 'hr_token'// 获取token的方法
export function getToken() {return Cookies.get(TokenKey)
}// 设置方法
export function setToken(token) {return Cookies.set(TokenKey, token)
}// 删除方法
export function removeToken() {return Cookies.remove(TokenKey)
}

使用
src/store/modules/user.js

import { setToken, getToken, removeToken } from '@/utils/auth'state: () => ({// 先从本地取token: getToken() || '',userInfo: {}}),mutations: {setToken(state, token) {// 存入vuexstate.token = token// 存入本地setToken(token)},setUserInfo(state, userInfo) {state.userInfo = userInfo},// 清除用户数据的方法removeUserInfo(state) {state.token = ''state.userInfo = {}removeToken()// 重置路由resetRouter()}},

vuex配合本地Cookies数据持久化相关推荐

vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置安装 axios ...
Vuex 模块化配合本地存储
开发时,我们会经常用到vueX,但vuex有个缺点,一刷新数据就没了,所以,我们要配合本地存储,将本地存储的能力赋予 Vuex,让Vuex也有抵抗刷新的能力: 我们的核心代码都写在 App.vue 文 ...
vscode使用vuex数据持久化插件(vuex-persistedstate)
vscode使用vuex数据持久化插件(vuex-persistedstate) 因为Vue是单页面应用,页面跳转是vue-router实现的类似页面跳转的效果(切换对应的组件以展示不同的页面),刷新 ...
Unity3D 本地数据持久化记录存储
本地数据持久化一. PlayerPrefs 使用案例二.xml 三.json 一. PlayerPrefs PlayerPrefs是unity自带的一个数据存储类描述 PlayerPrefs 是 ...
【Unity3D 教程系列第 15 篇】本地数据持久化之 Playerprefs 类
这是[Unity3D 教程系列第 15 篇],如果觉得有用的话,欢迎关注专栏. 文章目录一:什么是 PlayerPrefs 类二:PlayerPrefs 类中的静态方法 1:写入数据 2:读取数据 ...
马小看前端( vuex数据持久化简单的操作 )
马小看前端( vuex数据持久化简单的操作 ) 1.首先在小黑框中下载插件! npm install vuex-persistedstate 2.在store.js中引入下面的代码,即可完成数据持久化 ...
vue存储数据的几种方法（Vuex与本地存储）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 vue存储数据的几种方法(Vuex与本地存储) 前言一.vuex 1.创建vuex 2.存入数据 3.取出数据二.本地存储 1.存 ...
前端性能——数据持久化
如何实现数据持久化一般情况下,借用本地存储用的比较多,或者一些插件,如vue的keep-alive,配合redux使用的persist 为什么需要数据持久化 1.减少发起请求的次数,从而提高性能. ...
Android数据持久化
Android数据持久化(存储) 1.SharedPreferences SharedPreferences是Android提供的数据持久化的一种手段,适合单进程.小批量的数据存储与访问.Shared ...

vuex配合本地Cookies数据持久化

vuex配合本地Cookies数据持久化相关推荐

最新文章

热门文章