vue缓存服务器文件到本地,vue中,在本地缓存中读写数据的方法

1.安装good-storage插件

cnpm i good-storage --save

2.读/写的方法

common/js/cache.js:

import storage from 'good-storage'

const SEARCH_KEY = '__search__'

const SEARCH_MAX_LENGTH = 15

// compare:findindex传入的是function,所以不能直接传val

function 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中,在本地缓存中读写数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

vue缓存服务器文件到本地,vue中,在本地缓存中读写数据的方法相关推荐

android json mysql_Android通过json向MySQL中读写数据的方法详解【读取篇】
本文实例讲述了Android通过json向MySQL中读取数据的方法.分享给大家供大家参考,具体如下: 首先要定义几个解析json的方法parseJsonMulti,代码如下: private vo ...
python读取json数据格式问题_浅谈Python中的异常和JSON读写数据的实现
异常可以防止出现一些不友好的信息返回给用户,有助于提升程序的可用性,在java中通过try ... catch ... finally来处理异常,在Python中通过try ... except .. ...
vue读取服务器文件跨域,新版vue-cli模板下本地开发环境使用node服务器跨域的方法...
背景我们都知道浏览器有一个既核心也最基本的安全功能,即同源策略.同源分别是:协议,域名,端口.如果浏览器访问服务器不同源的话,就会访问不到数据.那开发中常常访问的服务器不同源,那么可以借助一个服务器 ...
vue cli 服务器文件,Vue CLI 部署 - 闪电教程JSRUN
部署通用指南如果你用 Vue CLI 处理静态资源并和后端框架一起作为部署的一部分,那么你需要的仅仅是确保 Vue CLI 生成的构建文件在正确的位置,并遵循后端框架的发布方式即可. 如果你独立于 ...
C# 将服务器文件批量压缩打包下载至本地两种方法（压缩包缓存到服务器下载、压缩包缓存到内存下载）
1.将服务器文件打包下载至本地(压缩包缓存到服务器下载) (1)文件批量压缩成压缩包并缓存到服务器(公共方法) using ICSharpCode.SharpZipLib.Checksums; usi ...
vue上传文件到php,vue+axios+php如何实现上传文件功能？,formdata上传文件附加参数...
vue+axios+php如何实现上传文件功能?Vue Axios PHP如何实现上传文件的功能?, 推荐:<PHP视频教程> 当我们提交表单时,我们经常会遇到一些表单提交要求.vue的a ...
android json mysql_Android通过json向MySQL中读写数据的方法详解【写入篇】
本文实例讲述了Android通过json向MySQL中写入数据的方法.,具体如下: 先说一下如何通过json将Android程序中的数据上传到MySQL中: 首先定义一个类JSONParser.Jav ...
移动硬盘文件或目录损坏且无法读取？分享恢复数据的方法
案例:移动硬盘提示无法访问,文件或目录损坏且无法读取? "这个移动硬盘两年没用了,今天拿出来找文件,插上电脑后移动硬盘打不开,提示无法访问,文件或目录损坏且无法读取.硬盘里有重要文件,如何恢 ...
fetch vue读取json文件_fetch在vue中的使用方法
1.安装fetch: npm install whatwg-fetch --save 2.在入口index.js文件中引入 import 'whatwg-fetch' 3.let url = glob ...

vue缓存服务器文件到本地,vue中,在本地缓存中读写数据的方法

vue缓存服务器文件到本地,vue中,在本地缓存中读写数据的方法相关推荐

最新文章

热门文章