基于查询参数的模式未在 Vue 中显示答案

【问题标题】：Modal not showing in Vue based on query parameter基于查询参数的模式未在 Vue 中显示
【发布时间】：2020-06-24 14:15:08
【问题描述】：

我有一个 Vue.js 应用程序，如果我单击一个按钮，它会正确显示模式，但我想根据 URL 参数显示它。我有一个模态的开放方法：

<script>
export default {
  methods: {
    show() {
      console.log("showing modal")
      this.$modal.show("set-game-name");
    },
...

这一切都可以通过模板中的按钮正常工作：

<button @click="show">Click</button>

它打印“显示模式”并弹出模式。

但是，我想做的是根据 URL 搜索字符串设置一个 Vuex 存储变量，并在设置时显示模式。这在 App.vue 中的代码中可以正常工作

created() {
  if (location.search.match(/walkThrough/) {
    this.$store.dispatch("updateWalkThrough", true)
  }
}

这按预期工作，变量被设置。在模态组件的创建中，我有：

created() {
  console.log(this.walkThrough)
  if (this.walkThrough) {
    this.show() // Same show function as above
  }

这会打印出正确的walkThrough 值并像以前一样正确记录“显示模式”。但是，模态不会出现。控制台中没有记录任何错误......有什么想法吗？我需要使用不同的生命周期钩子吗？

【问题讨论】：

【解决方案1】：

用create 方法代替mounted 方法。

在加载页面之前调用create方法，如果页面已经加载，则调用mounted方法。

【讨论】：