如何在 Vue 2 Vuex 商店中使用 $route？

Posted 2023-02-16

【中文标题】如何在 Vue 2 Vuex 商店中使用 $route？

【英文标题】：How to use $route in Vue 2 Vuex store?

【发布时间】：2021-12-05 18:59:23

【问题描述】：

我有一个包含动态存储的 Nuxt 应用程序。这家商店有一个看起来像这样的方法：

loadCampaign( commit, dispatch, state ) 
try 

    const share_token = this.$route.query.share_token;

    let campaign = null;

    share_token
                ? campaign = await this.$api.campaigns.getSharedCampaign(share_token)
                : campaign = await this.$api.campaigns.getCampaign(state.id);
    ...

此代码引发有关 $router 未定义的错误。如何在 Vuex 商店（动态商店）中获取路由器？为什么它不能这样工作。$api 是另一个插件？

谢谢。

【问题讨论】：

如果你使用 console.log this 会得到什么？你看到$router了吗？

【参考方案1】：

在调度 store 操作时，您应该将您的 shareToken 值作为参数从您的 vuejs 组件传递。

编辑：添加示例

// inside vuejs component

this.$store.dispatch('loadCampaign', this.$route.query.share_token)


// vuex

loadCampaign( commit, dispatch, state , shareToken) 
    // ... your code

【讨论】：

是的，它可能就是这样。但我想把它放在一个地方。我想我有一个解决办法。 this.$router.currentRoute.query.share_token 谢谢。

@Čamo 您可以在您的 vuex 商店 import router from '.../router.js' // Vue router instance 中导入路由器，然后使用路由器变量。我仍然建议您保持商店操作干净且没有太多逻辑。

@Čamo 您完全可以将默认参数传递给您的 vuex 操作。