Vue Store缓存sessionStorage,localStorage封装

1.安装store

npm install --save store

2.定义封装缓存文件 /common/storeStorage.js

import 'vue';

import store from 'store';
import sessionStorage from 'store/storages/sessionStorage';
import localStorage from 'store/storages/localStorage';

export const sessionStor = store.createStore(sessionStorage);
export const localStor = store.createStore(localStorage);

export const STORAGE_KEYS = {
    CITY_ID: 'EVENTS_CITY_ID',
    SPRING_BUY_INFO: 'SPRING_BUY_INFO',
    SPRING_TRADE_NO: 'SPRING_TRADE_NO',
    SPRING_PAY_AGREEMENT: 'SPRING_PAY_AGREEMENT',
    DONT_CHECK_NAVIGATION: 'DONT_CHECK_NAVIGATION',
};

export const storePlugin = (V) => {
    Object.defineProperty(V.prototype, '$session', {value: sessionStor, writable: true});
    Object.defineProperty(V.prototype, '$local', {value: localStor, writable: true});
    Object.defineProperty(V.prototype, '$STORAGE_KEYS', {value: STORAGE_KEYS, writable: true});
};

export default sessionStor;

3.在main.js中使用

import {storePlugin} from './common/storeStorage';
Vue.use(storePlugin);

4.在页面使用

var value = '1111';
this.$session.set('value1', value);
console.log(this.$session.get('value1'));
var value2 = 222;
this.$local.set('value2', value2);
console.log(this.$local.get('value2'));
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 目录 一、项目结构的核心思想 二、项目目录结构 三、资源路径编译规则 四、index.html 五、build目录...
    科研者阅读 11,557评论 0 40
  • Unrolled List 链表是我们每个程序员都烂熟于胸的一个数据结构,它有很多优点,递归的结构,动态的节点内存...
    pengwang9阅读 989评论 0 1
  • 儿子:妈妈,世界上没有的东西是什么? 妈妈:你觉得是什么? 儿子:我不知道啊! 妈妈:你要先知道世界上已经有的东西...
    三生若尘阅读 1,131评论 0 2
  • 外在命运和内在想象(内在意识)是镜像关系 你可以通过一个人的外在命运,看到他的内在想象,也可以通过他的内在想象,看...
    旃檀海岸阅读 553评论 0 1
  • 2—1 金海锦 11月13日 分享 今天晚上孩子来电话说:“考前压力很大,情绪不高”。我想:来的好,助教来了,把学...
    金海锦阅读 210评论 0 0

友情链接更多精彩内容