如何一起导航和调度动作？ Nuxt, Vuex答案

【问题标题】：How to navigate and dispatch action together? Nuxt, Vuex如何一起导航和调度动作？ Nuxt, Vuex
【发布时间】：2021-04-25 18:52:58
【问题描述】：

我正在使用 Nuxt 动态路由导航到页面，我想要的只是通过单击按钮来调度操作并一起导航。

                        <v-btn
                          rounded
                          depressed
                          dark
                          color="green"
                          @click="fetchSocietyData()"
                          :to="'societies/' + sname"
                          nuxt
                          >Show Details</v-btn
                        >

                        <v-btn
                          v-if="$auth.loggedIn"
                          rounded
                          depressed
                          dark
                          color="blue"
                          :to="'societies/_ed/' + sname"
                          nuxt
                          >Edit Details</v-btn
                        >
                      </v-flex>
..
.
.
.
.
.
      async fetchSocietyData() {
      await this.$store.dispatch("societystore/fetchSpecificSocietyDetails", {
        id: this.id,
      });
      // console.log(this.id);
    },

它在不调度的情况下导航到页面，如果我删除路由 (:to)，它会成功调度。任何帮助将不胜感激:)。

【问题讨论】：

标签： nuxt.js vuex

【解决方案1】：

在你的 fetchSocietyData 方法中，你可以有类似的东西

await this.$store.dispatch("societystore/fetchSpecificSocietyDetails", {
  id: this.id,
})
this.$router.push({ path: `societies/${this.sname}` })

这样，您正在执行操作，等待它完成，然后以编程方式导航。
更多信息在这里：https://router.vuejs.org/guide/essentials/navigation.html#router-push-location-oncomplete-onabort

当然，在导航之前确保操作成功可能是一件好事。

顺便说一句，监听器应该是@click="fetchSocietyData"，不需要括号，否则你可能会有一些意想不到的行为。

【讨论】：