时间:2021-05-26
1.安装good-storage插件
cnpm i good-storage --save2.读/写的方法
common/js/cache.js:
import storage from 'good-storage'const SEARCH_KEY = '__search__'const SEARCH_MAX_LENGTH = 15// compare:findindex传入的是function,所以不能直接传valfunction insertArray(arr, val, compare, maxLen) { const index = arr.findIndex(compare) if (index === 0) { return } if (index > 0) { arr.splice(index, 1) } arr.unshift(val) // 插入到数组最前 if (maxLen && arr.length > maxLen) { arr.pop() // 删除末位元素 }}// 存储搜索历史export function saveSearch(query) { let searches = storage.get(SEARCH_KEY, []) insertArray(searches, query, (item) => { return item === query }, SEARCH_MAX_LENGTH) storage.set(SEARCH_KEY, searches) return searches}// 加载本地缓存的搜索历史export function loadSearch() { return storage.get(SEARCH_KEY, [])}3.数据用vuex传递
在store/actions.js中写入数据:
import * as types from './mutation-types'import {saveSearch} from 'common/js/cache'export const saveSearchHistory = function({commit, state}, query) { commit(types.SET_SEARCH_HISTORY, saveSearch(query))}4.组件中调用vuex
import {mapActions} from 'vuex'// methods内: saveSearch() { this.saveSearchHistory(this.query) }, ...mapActions([ 'saveSearchHistory' ])以上这篇vue中,在本地缓存中读写数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在实际开发中,对于要反复读写的数据,最好的处理方式是将之在内存中缓存一份,频繁的数据库访问会造成程序效率低下,同时内存的读写速度本身就要强于硬盘。Spring在
vuex-persistedstate核心原理:在本地存储中存入所有的vuex数据,页面刷新时到缓存中取数据,放到vuex中下载:$npminstallvuex
离线缓存就是在网络畅通的情况下将从服务器收到的数据保存到本地,当网络断开之后直接读取本地文件中的数据。如Json数据缓存到本地,在断网的状态下启动APP时读取本
在使用vue开发过程中,难免需要去本地数据地址进行请求,而原版配置在dev-server.js中,新版vue-webpack-template已经删除dev-s
vue缓存分为页面缓存、组建缓存、接口缓存,这里我主要说到了页面缓存和组建缓存页面缓存:在server.js中设置constLRU=require('lru-c