0

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.

Boatracer
  • 3
  • 1
  • "the correct content is not displayed", what do you mean exactly? Do you see something in your Vue devtools? Also, you're calling 2 dispatchs without `await`'ing them, you should probably do that first. I'm also not sure to fully understand why you do have an "index" layout with an "id" specific post at the same time, looks like you're trying to achieve 2 things at the same time here. I recommend something [like this](https://stackoverflow.com/a/67490633/8816585), where you could then set some specific layouts/page + cache API's content thanks to Nuxt capabilities. – kissu Sep 16 '22 at 07:46
  • Also, as a reminder, a layout is basically a page nothing more really. You get some shortcuts regarding it's usage but you can basically consider that page = layout most of the time. You can do several layouts if you wish, nothing wrong with that one. Meanwhile, the logic is still wrong here, mostly because you don't really need to do everything into a single layout, try to split it by it's role: index + id. Also, do you do something on your posts here? Otherwise, a `mapState` is more adapted than a `mapGetter` regarding Vuex. – kissu Sep 16 '22 at 07:50
  • @kissu For example, if a user moves from a foo page to a bar page, if "This is bar" is displayed in the h1 and p tags, it is considered that "the correct content is displayed". But now, even if you move from foo to bar, it is still This is foo, so the "correct content is not displayed". I didn't know that dispatch requires await. – Boatracer Sep 20 '22 at 07:16
  • Mainly because you are not using pages properly as said above. Please check my linked answer to have a better approach regarding your pages implementation. Dispatch is doing an async operation, so it's always nice to await such things. – kissu Sep 20 '22 at 07:40

1 Answers1

0

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;
    }
  },
...
Damzaky
  • 6,073
  • 2
  • 11
  • 16
  • You're correct regarding the layout. Overall, OP don't really need to have a local state overall, and could keep accessing it through the store without doing extra work without obvious benefits. – kissu Sep 16 '22 at 07:52