如何使用 Nuxt/Vue 在页面重新加载时更新组件状态？

Question

我正在构建一个“导航/进度条”组件，它使用 Nuxt.js 和 Bootstrap-Vue 向用户展示他们在应用程序流程中的进度。当用户跟随​​<nuxt-link> 到下一页时，进度条可以正常工作。但是，如果用户重新加载页面，进度条将重置为默认状态。

正如您在下面的示例中所见，我正在使用 Vue 观察器来更新页面路由更新的进度条。但是，当页面重新加载时，此观察程序不起作用（我认为这是因为在重新加载页面时，页面路由不会改变）。但是我还能如何强制进度条加载当前状态？

我觉得解决方案应该很简单，但我不知所措。我是 Vue 的新手，所以如果我遗漏了任何明显的东西，请原谅。谢谢！

Image of progress bar on Page One - "Page One Appearance"

Image of progress bar on Page Two - "Page Two Appearance"

这是我的 HTML <template>:

<template>
  <div>

    <div class="row">
      <div>
        <b-link to="/" v-bind:class="{ 'font-weight-bold text-primary':   pageOneActive, 'text-secondary font-weight-normal':   pageOneInactive }" >
          Build
        </b-link>
      </div>
      <div>
        <b-link v-bind:to="reviewLink" v-bind:class="{ 'font-weight-bold text-primary': pageTwoActive, 'text-secondary font-weight-normal': pageTwoInactive }" >
          Review
        </b-link>
      </div>
    </div>

    <b-progress :max="2">
      <b-progress-bar :value="progressIndicator"></b-progress-bar>
    </b-progress>

  </div>
</template>

我的<script 看起来像这样：

<script>
import Bootstrap from "bootstrap-vue";
export default {
  data() {
    return {
      pageName: this.$nuxt.$route.name,
      progressIndicator: 1,
      progressSuccess: 0,
      pageOneActive: true,
      pageOneInactive: false,
      pageTwoActive: false,
      pageTwoInactive: true,
    };
  },
  watch: {
    "$route.path": function() {
      let pageName = "index";
      let progressIndicator = 1;
      let progressSuccess = 0;
      let pageOneActive = null;
      let pageOneInactive = null;
      let pageTwoActive = null;
      let pageTwoInactive = null;

      function setPageInactive() {
        pageOneActive = false;
        pageOneInactive = true;
        pageTwoActive = false;
        pageTwoInactive = true;
      }

      pageName = this.$nuxt.$route.name;
      console.log(pageName);

      if (pageName === "index") {
        setPageInactive();
        progressIndicator = 1;
        pageOneActive = true;
        pageOneInactive = false;
      } else if (pageName === "review") {
        setPageInactive();
        progressIndicator = 2;
        pageTwoActive = true;
        pageTwoInactive = false;
      }

      console.log(progressIndicator);
      
      this.progressIndicator = progressIndicator;
      this.progressSuccess = progressSuccess;
      this.pageOneActive = pageOneActive;
      this.pageOneInactive = pageOneInactive;
      this.pageTwoActive = pageTwoActive;
      this.pageTwoInactive = pageTwoInactive;
    }
  }
};
</script>

（我知道这不是最有效的做事方式，使用 Inactive + Active 变量，而不是将 css 更改基于一个变量更改。我只是还没有时间更改它。）

Answer 1

当用户重新加载页面时，进度条重置为其默认状态的原因是因为在data 属性中，进度指示器为1。重新加载页面会将数据属性“重置”为其默认值。

但是，您可以使用 created/mounted 生命周期挂钩捕获重新加载时的值。在这里，我决定使用挂载的钩子。您进行与watcher 中相同的检查。为了避免重复，我将其提取到一个函数中并删除了冗余代码。如果您愿意，您可以将它们恢复到原来的状态。思路是一样的。

让你的script 部分是这样的：

<script>
import Bootstrap from "bootstrap-vue";
export default {
  data() {
    return {
      pageName: '',
      progressIndicator: 0,
      pageOneActive: true,
      pageTwoActive: false,
    };
  },
  methods: {
    determinePageProgressIndicator() {
      this.pageName = this.$nuxt.$route.name;
      this.progressIndicator = this.pageName === "index" ? 1 : 2  // this is ok now as there are only two page names. If there are more, the logic will be more complex.
      this.pageOneActive = this.pageName === 'index';
      this.pageTwoActive = this.pageName === 'review';
    }
  },
  mounted() {
    this.determinePageProgressIndicator();
  },
  watch: {
    "$route.path": function() {
      this.determinePageProgressIndicator();
    }
  }
};
</script>

您不需要像在 JavaScript 中那样使用 pageOneInactive 和 pageTwoInactive，您可以使用逻辑非 (!) 运算符来确定它们。

如果你知道pageOneActive = true，那么你可以替换pageOneInactive with !pageOneActive。逻辑 NOT 运算符会将表达式计算为 false。

您可以阅读有关逻辑非运算符here 的更多信息；

在您的template 中，您可以这样做

<template>
  <div>

    <div class="row">
      <div>
        <b-link to="/" v-bind:class="{ 'font-weight-bold text-primary':   pageOneActive, 'text-secondary font-weight-normal':   !pageOneActive }" > // replace pageOneInactive
          Build
        </b-link>
      </div>
      <div>
        <b-link v-bind:to="reviewLink" v-bind:class="{ 'font-weight-bold text-primary': pageTwoActive, 'text-secondary font-weight-normal': !pageTwoActive }" > // replace pageTwoInactive
          Review
        </b-link>
      </div>
    </div>

    <b-progress :max="2">
      <b-progress-bar :value="progressIndicator"></b-progress-bar>
    </b-progress>

  </div>
</template>