从 URL 路由时加载数据以存储在 Vue 中不起作用（单击按钮时有效）

Question

对于问题的措辞有些笨拙，我们深表歉意。我有点不确定如何完美地表达它，所以请随时提出更改建议。

我有一个菜单系统，点击 link 将数据加载到商店（它为它分派一个命令到商店并告诉它应该将哪种数据加载到状态变量） .

menuClick: function(event) {
  const dataKind = event.target.id;
  this.$store.dispatch("updateData", { type: dataKind });
}

我也有这样的路由器

import Thing1 from "./thing1.vue";
export const routes = [
    ...,
    { path: "/stuff/thing1", component: Thing1 }
];

此设置有效，我很满意。或者，更确切地说，我对它很满意，直到一位同事指出只需输入 URL（添加书签，跟随 link 等，任何东西但实际单击菜单项）并不能解决问题。该页面按预期呈现，但未加载数据，因此我们只显示 no bananas... 的消息。

我该如何解决？

我正在考虑的一种方法是将更新请求的发送挂接到路由事件，而不仅仅是单击菜单。问题是我不知道如何从技术上讲。有可能吗？

第二种方法不是在菜单中单击（或至少不仅在单击时）而是在稍后阶段加载数据。这种方法的问题是我不知道在哪里放置更新。什么地方比较好？

还有其他方法可以考虑吗？

Answer 1

如果需要初始化一些需要的数据，可以使用beforeMount or any other Lifecycle Hooks。您可以有一个方法来更新商店中的数据，并在初始化和 menuClick 时调用相同的方法。

结构应如下所示：

export default {
  components: { },
  data () {
    return {
    }
  },
  methods: {
    updateStore (value) {
      this.$store.dispatch("updateData", { type: value })
    },
    menuClick: function(event) {
      const dataKind = event.target.id
      this.updateStore( dataKind )
    }
  },
  beforeMount () {
    if(this.$route.dataKind && someOtherConditionIfNeeded){
      this.getDetails(this.$route.dataKind)
    }
  }
}
</script>

Answer 2

我觉得你应该把那个ID设置成route参数，然后进入component，你就可以watch route，当route被激活的时候会采集数据。 (https://router.vuejs.org/en/advanced/data-fetching.html)

我的仓库中有一个示例 https://github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app/views/PostView.vue#L56。

对于 VueJS 1.x 用户，使用 data 和 route object

的方式有点不同

route: {
    data ({ to }) {
      // Triggering method, and sending route params
    }
}

从 URL 路由时加载数据以存储在 Vue 中不起作用（单击按钮时有效）

Loading data to store in Vue not working when routing from URL (works when clicking on a button)

javascript

store

url-routing

vue.js

vue-router