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

【问题标题】：Loading data to store in Vue not working when routing from URL (works when clicking on a button)从 URL 路由时加载数据以存储在 Vue 中不起作用（单击按钮时起作用）
【发布时间】：2017-04-25 17:34:00
【问题描述】：

很抱歉这个问题的措辞有些笨拙。我有点不确定如何完美地表达它，所以请随意提出修改建议。

我有一个菜单系统，单击链接会将数据加载到存储区（它将命令发送到存储区并告诉它应该将哪种数据加载到状态变量中）。

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（添加书签、点击链接等，除了实际点击菜单项之外的任何操作）都不会不要做这个把戏。页面按预期呈现，但未加载数据，因此我们只显示 nobananas... 的消息。

我该如何解决？

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

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

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

【问题讨论】：

为什么你不处理加载到组件的数据？我认为调度有一个错误的用例。
@BelminBedak 好问题。我对这项技术还很陌生，所以我可能做错了。我试图按照他们页面上的建议告诉我有一个外部存储并向它发送更新，以便它们保存在状态中。然后，我有将状态暴露给组件的 getter。您建议如何处理？
很难说，但是当你触发这个menuClick方法时，你要发送什么数据来存储？
我只是通过 dispatch 方法向 store 提供了一个 ID。然后 store 将处理实际的 ajax 调用以获取数据并填充状态。
好的，我认为这有点错误。我会在这里做什么：首先您应该将该 ID 作为路由参数发送，然后在您的组件中，您可以查看该路由并获取数据组件中的特定 ID。看看我是怎么做到的github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app/…

标签： javascript vue.js url-routing store vue-router

【解决方案1】：

如果您必须初始化一些需要的数据，您可以使用beforeMount 或任何其他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>

【讨论】：

【解决方案2】：

我觉得你应该把那个ID设置为路由参数，然后放到组件里，你就可以观察路由了，当路由激活的时候会收集数据。 (https://router.vuejs.org/en/advanced/data-fetching.html)

有一个来自我的 repo https://github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app/views/PostView.vue#L56 的例子。

对于 VueJS 1.x 用户，data 和 route 对象的方式有点不同

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

【讨论】：