vue中,在本地缓存中读写数据的方法

 更新时间:2018年09月21日 16:02:18   作者:卫夫子  
今天小编就为大家分享一篇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中的watch和computed

    详解Vue中的watch和computed

    这篇文章主要介绍了Vue中的watch和computed的相关资料,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • Electron + vue 打包桌面操作流程详解

    Electron + vue 打包桌面操作流程详解

    这篇文章主要介绍了Electron + vue 打包桌面操作流程,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vue导出word纯前端的实现方式

    vue导出word纯前端的实现方式

    这篇文章主要介绍了vue导出word纯前端的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue CLI 3搭建vue+vuex最全分析(推荐)

    Vue CLI 3搭建vue+vuex最全分析(推荐)

    这篇文章主要介绍了Vue CLI 3搭建vue+vuex最全分析(推荐),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue3指令之搜索框输入防抖功能实现

    Vue3指令之搜索框输入防抖功能实现

    在Vue开发中遇到了搜索框输入防抖处理,算是防抖的使用场景之一吧,这篇文章主要给大家介绍了关于Vue3指令之搜索框输入防抖功能实现的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue返回上一页面时不刷新问题及解决方案

    vue返回上一页面时不刷新问题及解决方案

    这篇文章主要介绍了vue返回上一页面时不刷新问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue中的按钮绑定事件小案例

    vue中的按钮绑定事件小案例

    这篇文章主要介绍了vue中的按钮绑定事件小案例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Ant Design的Table组件去除

    Ant Design的Table组件去除

    这篇文章主要介绍了Ant Design的Table组件去除“取消排序”选项操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue-router 切换组件页面时进入进出动画方法

    Vue-router 切换组件页面时进入进出动画方法

    今天小编就为大家分享一篇Vue-router 切换组件页面时进入进出动画方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • ElementUI中el-tree节点的操作的实现

    ElementUI中el-tree节点的操作的实现

    这篇文章主要介绍了ElementUI中el-tree节点的操作的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02

最新评论