根据 vuex 状态重新加载组件数据答案

【问题标题】：Reload component data based on vuex state根据 vuex 状态重新加载组件数据
【发布时间】：2019-02-04 13:37:57
【问题描述】：

我正在为多个网上商店创建一个管理面板。为了跟踪我当前正在编辑的网站，我在我的 vuex 状态中有一个 website 对象。可以通过在状态上调度操作的按钮来更改网站。

管理仪表板页面是显示所选网站统计信息的页面，这些统计信息的数据当前保存在页面组件本身中。

现在我在仪表板上切换到另一个网站时遇到问题。因为仪表板的 url 相同，所以统计信息不会改变。我想这是因为 vue-router 没有检测到 url 的更改，所以不需要重新加载组件，但是我希望在网站更改时发生这种情况。或者至少是一种知道网站已更改的方法，以便我可以再次手动调用 ajax 源。

几周前我刚刚开始使用 vue，但没有找到实现此目的的方法。

【问题讨论】：

标签： javascript vue.js vuex vue-router

【解决方案1】：

您可以订阅 Vuex 变更和操作：https://vuex.vuejs.org/api/#subscribe

在你的管理仪表板组件的 created 钩子上，假设你正在注入 Vuex 存储，你可能有类似的东西：

created: function() {
    this.unsubscribe = this.$store.subscribe((action, state) => {
        if (action.type === 'changeWebsite') {  // Whatever your action is called
            this.updateWebsiteData(action.payload); // Method to update component data 
        }
    });
},
beforeDestroy: function() {
    this.unsubscribe();
},

【讨论】：

谢谢！稍作调整后，效果很好！ :)