使用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具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

以上就是使用vue怎么在本地缓存中读写数据，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。