vue问题

至臻

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

myskya

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

以下给你个把例子
1、安装cnpm i good-storage --save

1. import storage from 'good-storage'
   
2. 
   
3. const SEARCH_KEY = '__search__'
   
4. const SEARCH_MAX_LENGTH = 15
   
5. 
   
6. // compare:findindex传入的是function,所以不能直接传val
   
7. function insertArray(arr, val, compare, maxLen) {
   
8. const index = arr.findIndex(compare)
   
9. if (index === 0) {
   
10. return
    
11. }
    
12. if (index > 0) {
    
13. arr.splice(index, 1)
    
14. }
    
15. arr.unshift(val) // 插入到数组最前
    
16. if (maxLen && arr.length > maxLen) {
    
17. arr.pop() // 删除末位元素
    
18. }
    
19. }
    
20. 
    
21. // 存储搜索历史
    
22. export function saveSearch(query) {
    
23. let searches = storage.get(SEARCH_KEY, [])
    
24. insertArray(searches, query, (item) => {
    
25. return item === query
    
26. }, SEARCH_MAX_LENGTH)
    
27. storage.set(SEARCH_KEY, searches)
    
28. return searches
    
29. }
    
30. // 加载本地缓存的搜索历史
    
31. export function loadSearch() {
    
32. return storage.get(SEARCH_KEY, [])
    
33. }

复制代码

2，数据用vuex传递

在store/actions.js中写入数据:

1. import * as types from './mutation-types'
   
2. import {saveSearch} from 'common/js/cache'
   
3. 
   
4. export const saveSearchHistory = function({commit, state}, query) {
   
5.   commit(types.SET_SEARCH_HISTORY, saveSearch(query))
   
6. }
   

复制代码

组件中调用vuex

1. import {mapActions} from 'vuex'
   
2. 
   
3. // methods内:
   
4. saveSearch() {
   
5.   this.saveSearchHistory(this.query)
   
6. },
   
7. ...mapActions([
   
8.   'saveSearchHistory'
   
9. ])

复制代码