Не выводятся данные из store в template (nuxt приложение)

Question

Пишу блог на nuxt, при загрузке шаблона делаю запрос на сервер всех постов, сохраняю их в state, далее на странице передаю их в компонент через props, но они не выводятся в template компонента. Подскажите что я делаю не так?

P.S. Данные с сервера приходят корректно, в инспекторе Vue props видны.

код store

export const state = () => ({
  post: []
})

export const mutations = {
  setPost(state, post) {
    state.post = post
  }
}

export const actions = {
  async getPost({ commit, dispatch }) {
    try {
      const post = await this.$axios.$get("/api/post/admin")
      dispatch("setPost", post)
    } catch (e) {
      commit('setError', e, { root: true })
      throw e
    }
  },

  // Вызов Mutation setPost
  setPost({ commit }, post) {
    commit("setPost", post)
  }
}

export const getters = {
  getPost: state => state.post,
  getActivePost: state => state.post.filter(item => item.status == true),
}

код шаблона делаю запрос на сервер для получения всех постов

<template>
  <div class="container">
    <div class="bg"></div>
    <el-container>
      <el-main>
        <nuxt></nuxt>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  watch: {},
  mounted() {
    // Запрос данных из БД
    this.$store.dispatch("post/getPost")
  },
  methods: {}
};
</script>

код страницы где получаю посты из store через getters и передаю их в компонент через props

<template>
  <div class="wrapper">
    <app-slider :slideList="slideList"></app-slider>
  </div>
</template>

<script>
import AppSlider from "@/components/user/Slider";
export default {
  components: {
    AppSlider
  },
  layout: "user",
  data() {
    return {};
  },
  computed: {
    // Запрос постов из store
    slideList() {
      return this.$store.getters["post/getPost"];
    }
  },
  mounted() {},
  methods: {}
};
</script>

код компонента, где пытаюсь вывести посты в template

<template>
  <div class="slider">
    <svg-icon @click="prevSlide()" class="slider__btn-prev" name="arrow" />
    <ul class="slider__list">
      <li
        ref="slide"
        class="slider__item"
        v-for="slide in slideList"
        :key="slide._id"
      >
        <app-pdf :title="slide.title" :pathFile="slide.pathFile"></app-pdf>
        <span class="slider__item-date">{{
          $moment(slide.date).format("DD.MM.YYYY")
        }}</span>
      </li>
    </ul>
    <svg-icon @click="nextSlide()" class="slider__btn-next" name="arrow" />
    <ul class="dot__list">
      <li
        @click="goSlide(index)"
        ref="dot"
        class="dot__item"
        v-for="(slide, index) in slideList"
        :key="slide._id"
      ></li>
    </ul>
  </div>
</template>

<script>
import AppPdf from "@/components/common/Pdf";
export default {
  components: {
    AppPdf,
  },
  props: {
    slideList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      currentSlide: 1,
      timer: null,
    };
  },
  mounted() {
    if (this.slideList.length > 0) {
      this.$refs.slide[0].classList.add("slider__item--active");
      this.$refs.dot[0].classList.add("dot__item--active");
      this.goSlide(0)
      this.startTimer();
    }
  },
  destroyed() {
    this.stopTimer();
  },
  computed: {},
  watch: {},
  methods: {
    showSlide(index = 1) {
      index > this.slideList.length ? (this.currentSlide = 1) : false;
      index < 1 ? (this.currentSlide = this.slideList.length) : false;

      for (let i = 0; i < this.$refs.slide.length; i++) {
        this.$refs.slide[i].classList.remove("slider__item--active");
      }

      for (let i = 0; i < this.$refs.dot.length; i++) {
        this.$refs.dot[i].classList.remove("dot__item--active");
      }

      this.$refs.slide[this.currentSlide - 1].classList.add(
        "slider__item--active"
      );

      this.$refs.dot[this.currentSlide - 1].classList.add("dot__item--active");
    },
    prevSlide() {
      this.showSlide(--this.currentSlide);
    },
    nextSlide() {
      this.showSlide(++this.currentSlide);
    },
    goSlide(index) {
      this.showSlide((this.currentSlide = index + 1));
    },

    // Запуск таймера
    startTimer() {
      this.timer = setInterval(() => {
        this.nextSlide();
      }, 60000);
    },
    // Остановка таймера
    async stopTimer() {
      this.currentSlide = await 1;
      await clearTimeout(this.timer);
    },
  },
};
</script>

Answer 1

В общем так я и не нашел ответ на свой вопрос, но скорее всего проблема заключалась в том, что сначала рендерится страница со всеми компонентами, а потом уже она берет текущее состояние из state

БЛОГ НА HUSL

Не выводятся данные из store в template (nuxt приложение)

Ответы (1 шт):