vue项目storage本地存储

1.在model文件夹下面新建一个storage.js

const storage = {set(key,value){sessionStorage.setItem(key,JSON.stringify(value));},get(key){return JSON.parse(sessionStorage.getItem(key));},getForIndex(index){return sessionStorage.key(index)},getKeys(){let items = this.getAll();let keys = [];for(let index = 0;index<items.length;index++){keys.push(items[index].key);}},getLength(){return sessionStorage.length;},getSupport(){return (typeof (Storage) !== "undefined")?true:false;},remove(key){sessionStorage.removeItem(key);},removeAll(){sessionStorage.clear();},getAll(){let len = sessionStorage.length;let arr = [];for(let i=0;i<len.length;i++){const getKey =  sessionStorage.key(i);const getVal = sessionStorage.getItem(getKey);arr[i] = {"key":getKey,"val":getVal,}}return arr;},
};export default storage;

2.创建store

import Vue from "vue";
import Vuex from "vuex";
import storage from "@/model/storage";Vue.use(Vuex);const store = new Vuex.Store({state: {//  存储tokentoken: '',userName: '',roleId:'',staticRoute:[]//这个是本地路由},actions: {setuserInfoFun(context, name){context.commit('setuserInfo', name);},set_tokenFun(context, token){context.commit('set_token', token)},del_tokenFun(context){context.commit('del_token')},set_roleIdFun(context,id){context.commit('set_roleId',id)},set_routerFun(context,route){context.commit('set_router',route)}},//  计算属性mutations: {//  修改token，并将token存入localStorageset_token(state, token){state.token = token;storage.set('token', token);},del_token(state){state.token = "";storage.remove('token');},setuserInfo(state, userName){state.userName = userName;},set_roleId(state,id){state.roleId = id;},set_router(state,router){state.staticRoute = router;storage.set('route', router);}}
});export default store;

vue项目storage本地存储相关推荐

vue-cli快速构建vue项目和本地模拟请求数据
Vue-cli快速构建 Vue 项目和本地模拟请求数据 1 前提: 安装了 node.js 首先: 全局安装 vue-cli npm intsall vue-cli -g (-g代表全局安装) 2 使 ...
vue项目起本地，改成https协议请求
一般正常的vue项目,本地localhost起来默认是http请求协议开头的. 如果后端将http协议改成https请求,那么我们前端也需要进行更改,否则后端接口会报400(bad resquest ...
Vue项目配置本地访问地址和IP访问地址
Vue项目配置本地访问地址和IP访问地址 1.在config/index.js配置: dev: {host: '0.0.0.0', } 2.在build/webpack.dev.config.js更改 ...
【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
文章目录一.本地存储 1.概念 2.接口 3.实际操作二.自定义事件绑定 1.自定义事件使用过程 2.绑定自定义事件的语法 3.其他注意事项三.全局事件总线 1.全局事件总线概念 2.全局事件总 ...
chrome拓展插件开发中使用chrome.storage本地存储
一.描述在扩展程序中本地存储数据可以通过 chrome.storage API 实现,和 web 中的 localstorage 在某些方面是有区别的,chrome.storage 已经做了优化. ...
手把手教你Vue项目实现本地Docker部署
近几年来,Docker 技术的应用已经越来越流行,目前已经产生前端工程Docker 化,身为前端开发的我,花了几天时间研究了下 Docker 的知识点,并实现了 Docker 本地部署 Vue 项目. ...
Vue 历史记录的本地存储清空历史记录
//Search-index.vue是父组件,引用Header.vue子组件 //Header.vue> <div class="search-main">< ...
github上下载别人的vue项目，本地运行
在github上下载了别人做好的vue项目解压好之后(如A文件夹) 进入到这个A文件夹打开所在目录的终端运行 npm install 然后它就会根据文件里面package.json文件里面写的依 ...
怎么从github上下载一个vue项目在本地运行
克隆项目: git clone https://github.com/AsaZws/... 安装nodejs 安装依赖: npm install 启动服务: npm run dev 发布代码: npm ...

vue项目storage本地存储

vue项目storage本地存储相关推荐

最新文章

热门文章