原因:
store本意不是用来存储数据的,而是存储组件状态。
但是因为存取速度比sessionStorage快。所以还是有人用来存数据。比如我。
那么这个重置的问题要咋搞呢?
解决办法:
使用window的beforeunload事件将store中的数据存储到sessionStorage中。
然后再声明周期函数created()中将session的数据替换掉vue中的store数据
不过这里有一个要注意异步的问题。因为js是异步执行机制。所以必须要等到session中的数据存储到store中之后才能执行涉及该store数据的代码,不然全部都是undefined。
可以通过promise对象来进行同步化
具体代码:
// 先建立seesion工具来统一调用
// util_session.js
import store from '../vuex/store'
// 用于sessionStorage替换store函数。
export function sessionReplaceStore (name) {
return new Promise((resolve, reject) => {
if (sessionStorage.getItem(name)) {
// 替换state状态
store.replaceState(
Object.assign(
{},
store.state,
JSON.parse(sessionStorage.getItem(name))
)
)
resolve(true)
} else {
resolve(false)
}
})
}
// vue文件
// xxxx.vue
// 无关的内容就不写了
<script>
import {sessionReplaceStore} from '../../utils/util_session'
created () {
// 页面刷新时恢复store数据
var that = this
sessionReplaceStore('store').then(reslove => {
// 执行需要获取store数据有关的代码
console.log(that.$store.state.stock)
}
// 发生页面销毁事件前将store数据存储至sessionStoreage中
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
}
</script>
这样就可以了。
代码说明:
promise():javascript异步操作的处理结果
参考文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
store.replaceState(): 用来替换store中的state数据
参考文档:https://vuex.vuejs.org/zh/api/#replaceState
Object.assign(): 对象合并函数。将第二,第三参数的对象合并保存至第一参数的对象中。并且返回该对象。
参考文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign