javascript - 根据vuex状态重新加载组件数据

Question

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

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

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

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

Answer 1

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

在管理仪表板组件创建的钩子(Hook)上，假设您正在注入(inject) 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();
},