使用NuxtLink切换动态文章页时无法获取Store数据的求助

问题根源：从一篇文章页跳转到另一篇时，页面组件的asyncData会重新执行并更新Store，但布局组件的created钩子仅在首次渲染时触发，不会随着路由更新重新获取Store数据，导致布局展示的还是旧内容。

方案一：用计算属性替代created赋值 #

直接将布局里的post和posts改为计算属性，自动响应Store的变化：

// layouts/post/index.vue
<template>
  <div>
    <h1 v-if="post">{{ post.title }}</h1>

    <p v-if="post">{{ post.title }} page</p>

    <ul>
      <li v-for="post in posts" :key="post.id">
        <NuxtLink :to="`/${post.id}`">
          {{ post.title }}
        </NuxtLink>
      </li>
    </ul>

    <NuxtLink to="/">Top</NuxtLink>
  </div>
</template>

<script>
export default {
  computed: {
    post() {
      return this.$store.getters['post'].post
    },
    posts() {
      return this.$store.getters['posts'].posts
    }
  }
};
</script>

方案二：监听路由变化更新数据 #

如果必须保留data里的变量，可以监听$route的变化，每次路由更新时重新从Store获取数据：

// layouts/post/index.vue
<template>
  <div>
    <h1 v-if="post">{{ post.title }}</h1>

    <p v-if="post">{{ post.title }} page</p>

    <ul>
      <li v-for="post in posts" :key="post.id">
        <NuxtLink :to="`/${post.id}`">
          {{ post.title }}
        </NuxtLink>
      </li>
    </ul>

    <NuxtLink to="/">Top</NuxtLink>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: null,
      posts: [],
    };
  },
  created() {
    this.updateDataFromStore()
  },
  watch: {
    $route() {
      this.updateDataFromStore()
    }
  },
  methods: {
    updateDataFromStore() {
      this.post = this.$store.getters['post'].post;
      this.posts = this.$store.getters['posts'].posts;
    }
  }
};
</script>

两种方案都能解决路由跳转后布局不更新的问题，推荐方案一，因为计算属性更符合Vue的响应式设计，代码也更简洁。

内容的提问来源于stack exchange，提问作者Boatracer