使用vue怎么在本地緩存中讀寫數(shù)據(jù)

本篇文章給大家分享的是有關(guān)使用vue怎么在本地緩存中讀寫數(shù)據(jù)，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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) // 插入到數(shù)組最前
 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.數(shù)據(jù)用vuex傳遞

在store/actions.js中寫入數(shù)據(jù):

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.組件中調(diào)用vuex

import {mapActions} from 'vuex'

// methods內(nèi):
 saveSearch() {
  this.saveSearchHistory(this.query)
 },
 ...mapActions([
  'saveSearchHistory'
 ])

Vue的優(yōu)點(diǎn)

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

以上就是使用vue怎么在本地緩存中讀寫數(shù)據(jù)，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。