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

Question

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

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

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

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

Answer 1

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

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

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

Reload component data based on vuex state

javascript

vue.js

vue-router

vuex