vuex+localStorage解决vuex的持久化,并且在不同页面的之间监听localStorage的变化

项目需要新开一个页面,并且在这个页面数据改变时候,父页面需要做相关判断并刷新,尝试过vuex解决,发现vuex刷新失效

查阅相关文档发现vuex无法持久化,vuex适合组件传值,并不适合页面之间传值,于是将vuex和localStorage结合,从而解决vuex的持久化问题,

1.在vuex的common.js中定义一个isRefresh,用来控制父页面的刷新状态,当监听到新开的页面中的数据改变时,父页面即刷新一次,

当vuex改变时将值存在本地.

在store中的getters.js中计算,当本地有isRefresh的值时先从本地取值.

import { mapMutations, mapGetters } from 'vuex'
//在相关页面中引入vuex
computed: { // 计算属性中用ES6扩展运算符计算getters
        ...mapGetters(['isRefresh'])
 },
 methods: {
        ...mapMutations(["SET_REFRESH"]),
        // 自己项目相关的一些方法.........
 }

然而在两个不同页面中用watch监听本地或者vuex中数据的变化是不起效果的.
因此我们可以设置定时器,定时监测本地存储中是否有localStorage.getItem(‘isRefresh’).