When moving between Dynamic Pages with NuxtLink, the data of store cannot be retrieved

Boatracer 0
Viewed 38

A demo is provided below.
stackblitz

When I move from the top page to a post page, the correct content is displayed, but when I move from a post page to another post page, the correct content is not displayed.
However, reloading will display the correct content.

Could you please show us how to display the correct content after transitioning from one posting page to another?

The code for the submission page is as follows.

// pages/post/_id.vue
<template>
  <div></div>
</template>

<script>
import { fetchPosts } from '../../lib/post';

export default {
  name: 'Post',
  layout: 'post/index',
  async asyncData({ route, store }) {
    const posts = await fetchPosts();
    const post = posts.find(({ id }) => id === route.params.id);
    store.dispatch('setPost', post);
    store.dispatch('setPosts', posts);
  },
};
</script>

// 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/' + post.id">
          {{ post.title }}
        </NuxtLink>
      </li>
    </ul>

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

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

The process flow is as follows

  1. pages retrieves data from the server and dispatches it to the store
  2. laytous retrieves data from the store and displays the data in laytous

I know that the use of pages and layouts is not common, but the project I am currently working on specifies this usage and I cannot change this usage.

nuxt.js vue.js javascript
1 Answers

That's because the layout was already rendered when the route changes (when the route changes, the layout/component used is already created, so the hook created is not called again), a simple fix would be to add a watch for the route:

...
  watch: {
    '$route': function (value) {
      this.post = this.$store.getters['post'].post;
      this.posts = this.$store.getters['posts'].posts;
    }
  },
...
Damzaky0
Related