全局数据
- [1]本地数据存储
- [2] 数据缓存
- 问题
有时在接口请求的某个数据需要在多个页面使用,此时有2个方法
- [1] 将数据存储在本地—> 等价于浏览器的localStorage
- [2] 将数据存储在数据缓存中 -> 等价于vue中的vuex
[1]本地数据存储
- 官方文档:官方文档
<template><div class="wrapper"><text id='text' @click='setValue'>存储数据</text><text id='text' @click='getValue'>获取数据</text></div>
</template><script>
import storage from '@system.storage'
import prompt from '@system.prompt'
export default {setValue(){storage.set({key: 'test',value: '11111',success: function(data) {prompt.showToast({message: '存储成功'})},fail: function(data, code) {console.log(`handling fail, code = ${code}`)}})},getValue(){storage.get({key: 'test',success: function(data) {prompt.showToast({message: data})},fail: function(data, code) {console.log(`handling fail, code = ${code}`)}})}
}
</script>
[2] 数据缓存
将大部分页面都需要使用的数据存储在app.ux中,比如存储数据dataCache
data:{dataCache:{}
}
// (引用类型)一定要在onCreate初始化,在data中设置的默认值不起作用(默认undefiend)
onCreate(){this.dataCache = {}
},
使用app.ux中声明方法去获取、修改、删除
//获取 app 缓存的数据
getAppCache (key) {return this.dataCache ? (this.dataCache[key] || '') : ''
},
// 设置 app 缓存的数据
setAppCache (key, val) {if (val === '' && this.dataCache[key]) {delete this.dataCache[key]return}this.dataCache[key] = val
},
clearAppCache () {this.dataCache = {}
}
在app.ux中声明的方法默认会被添加在
$app
身上,可以通过this.$app.方法名或者this. $app._def.方法名去获取
this.$app.setAppCache('type', 1111)
this.$app.getAppCache('type') // 1111
问题
// app.ux
data:{dataCache:{type: 0}
}
//获取 app 缓存的数据
getAppCache (key) {console.log(111111, this.dataCache) // 111111 undefiendreturn this.dataCache ? (this.dataCache[key] || '') : ''
},
// 设置 app 缓存的数据
setAppCache (key, val) {if (val === '' && this.dataCache[key]) {delete this.dataCache[key]return}this.dataCache[key] = val
},
clearAppCache () {this.dataCache = {}
}
// 其他页面
console.log(this.$app.getAppCache('type')) // ‘’
疑问🤔️: 在data中定义的初始值不起作用?!!!
在onCreate生命周期中再将数据初始化一边
onCreate(){this.dataCache = {}
},
此时再次调用this.$app.getAppCache(‘type’),此时可以正常获取了。
总结: 在data中数据的初始化不起作用,默认都是undefined
!!!