Как загрузить данные в NuxtJS SSR, через vuex?

Question

Немного не понял механики загрузки в SSR.

Данные на проекте отделены от компонентов, то есть загрузки происходят в vuex. Как мне правильно вызвать экшен с vuex, чтобы страница грузилась при помощи ssr?

<template lang="pug">
  .main
    post-list(:posts="posts")
</template>

<script>
import prostList from "@/components/post-list.vue";


export default {
  computed: {
    posts () {
      return this.$store.getters["posts/getlist"];
    }
  },
  components: {
    prostList
  },

  mounted() {
    
  },

  async fetch () {
    await this.$store.dispatch("posts/get_posts");
  }

  
}
</script>

собственно в store

import axios from "axios";

export default {
  state() {
    return {
      postlist: []
    }
  },

  actions: {
    get_posts(ctx) {
      return axios.get( ....

Answer 1

Store action может вызываться как на стороне сервера (SSR) так и на стороне клиента. Управлять тем, на какой стороне будет сделан вызов можно при помощи свойства fetchOnServer, если используется fetch.

Смотрите target свойство для nuxt.config.js
Смотрите fetch hook для компонентов и страниц, а так же, обратите внимание на свойство fetchOnServer.

P.S. Будьте внимательны. Есть два разных fetch.

Первый доступен в Nuxt >= 2.12, и в него не передаются никакие параметры, но до контекста можно добраться через this, например:

data: () => ({
    items: []
}),
async fetch() {
    const id = this.$route.params.id
    this.items = await this.$store.dispatch('moduleName/actionName',id)
}

Это именно то, что вам нужно, если я правильно понял ваш вопрос. Этот fetch может использоваться как в страницах, так и в компонентах, при использовании этого fetch, есть возможность использовать $fetchState.

Второй вид fetch доступен в Nuxt < 2.12. Он может использоваться лишь на страницах, для доступа контексту возможен через передаваемые параметры:

fetch({ store, params }) {
    store.dispatch('moduleName/actionName', params.id)
}

БЛОГ НА HUSL

Как загрузить данные в NuxtJS SSR, через vuex?

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