当Vue中的本地存储发生变化时，更新选项卡/浏览器会话之间的状态

Question

我有一个突变，允许我更新一个名为complianceList的VueX状态项。

ADD_TO_COMPLIANCE_LIST(state, payload) {
state.complianceList.push(payload)
},

这个项目被添加到列表后，我保存更新后的列表使用以下变化:

SAVE_LOCAL(state, company_name) {
localStorage.setItem(company_name, JSON.stringify(state.complianceList))
},

也每次组件挂载我得到当前的本地存储数据(所以刷新)

GET_LOCAL(state,company_name) {
state.complianceList = JSON.parse(localStorage.getItem(company_name));
}

所以我的问题是有可能更新complianceList状态变量时，localStorage的变化?在一个选项卡中，我添加了更多的列表，但在另一个选项卡中，更改没有更新，只有在刷新页面后才刷新列表。

可以使用类似

这样的监视器

watch: {
localStorage.getItem(this.company_name)() (
this.GET_LOCAL(state,this.company_name)
)
}

但它似乎不起作用。

Answer 1

这是一个粗糙的方法，但是您可以尝试一下。修改后重新加载页面

watch: {
localStorage.getItem(this.company_name)() (
this.GET_LOCAL(state,this.company_name)
location.reload() // window.location.reload()
)

Answer 2

在这种情况下可以使用actions或Vuex。

{
actions: {
SAVE_LOCAL(context) {
context.commit('SAVE_LOCAL');
}
}
}

dispatchthisactionson your button click event.

store.dispatch('SAVE_LOCAL');