至臻 发表于 2020-7-21 20:49:04

vue问题

vue中怎样全局监听本地缓存中的某个字段

myskya 发表于 2020-7-22 09:04:21

你的应用场景是什么?首先vue是指在服务端运行的,而vue打包之后是纯客户端的内容
缓存中的字段查看的话console.log是万能的
而如果你要监听某个变量是否有变动,可以写另外的方法
如setXXX方法,在set的callback中去处理你的事件。

以下给你个把例子
1、安装cnpm i good-storage --save
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, [])
}


2,数据用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))
}


组件中调用vuex

import {mapActions} from 'vuex'

// methods内:
saveSearch() {
this.saveSearchHistory(this.query)
},
...mapActions([
'saveSearchHistory'
])


页: [1]
查看完整版本: vue问题