Почему не работает store в nuxt?

Question

[Сергей Бурдужа]

Добрый день.
Разрабатываю сайт, в качестве админки, wordpress.

Есть 2 store:
Страница home.

export function state() {
  return {
    home: []
  }
}

export const mutations = {
  setHome(state, home) {
    state.home = home;
  }
}

export const actions = {
  async fetchHome({ commit }) {
    try {
      const home = await this.$axios.$get(process.env.WP_URL + '/wp-json/wp/v2/pages/10');
      console.log(home, 'home')
      commit('setHome', home);
    } catch (e) {
      console.log(e, 'e')
    }
    
  }
}

export const getters = {
  home(state) {
    return state.home;
  },
  homeIntro(state) {
    return state.home.acf.intro;
  }
}

И solutions, данные, которые нужно отображать на главной.

export function state() {
  return {
    solutions: []
  }
}

export const mutations = {
  setSolutions(state, solutions) {
    state.solutions = solutions
  }
}

export const actions = {
  async fetchSolutions({ commit }) {
    try {
      const solutions = await this.$axios.$get(process.env.WP_URL + '/wp-json/wp/v2/soluzioni');
      commit('setSolutions', solutions);
    } catch (e) {
      console.log(e, 'e')
    }
  }
}

export const getters = {
  getSolutions(state) {
    return state.solutions;
  }
}

Главная страница.

<template lang="pug">
  .home
    HomeIntro
    Solutions
</template>

<script>
import HomeIntro from "../components/Home/HomeIntro";
import Solutions from "../components/Home/Solutions";

export default {
  async fetch({ store }) {
    try {
      if (store.getters['home/home'].length === 0) {
        await store.dispatch('home/fetchHome');
      }
    } catch (e) {
      console.log(e, 'e')
    }

  },
  components: { Solutions, HomeIntro }
}
</script>

<style lang="scss" scoped></style>

И блоки Home intro и Solutions.

<template lang="pug">
  .home-intro
    img(:src="homeIntro.image" alt="")
    .container
      .home-intro__content
        h5.home-intro__label {{ homeIntro.label }}
        h2.home-intro__title {{ homeIntro.title }}
        .home-intro__text(v-html="homeIntro.text")
</template>

<script>
export default {
  computed: {
    homeIntro() {
      return this.$store.getters["home/homeIntro"];
    }
  },
  mounted() {
    // console.log(this.homeIntro, 'this.homeIntro')
  }
}
</script>

<template lang="pug">
  .solutions
    .item
      .img
        img
      .content
        h2.title
        .text
</template>

<script>
export default {
  async fetch({ store }) {
    await store.dispatch('solutions/fetchSolutions');
  },
  computed: {
    solutions() {
      return this.$store.getters["solutions/getSolutions"];
    }
  },
  mounted() {
    console.log(this.solutions, 'this.solutions')
  }
}
</script>

Так вот, данные в store home и блок home intro приходит и отображаются, а вот в solutions, в store данные приходят, но в блоке Solutions.vue пустой массив.

В store еще есть файл index.js, и если в нем прописать NuxtServerInit, и туда подключить dispatch из home и solutions, то данные прийдут в блок Solutions, но я хочу реализовать через fetch.

Может быть, где-то есть конфликт, но я не вижу где.

Заранее благодарен.

Comments

[WapSter]

Fetch умеет работать на уровне компонента? AsyncData например нет. И у тебя каждый запрос к серверу проходит через стор. Тебе это действительно так необходимо? Просто если данные нужны только на одной странице им нечего делать в сторе.

Answer 1

[Сергей Бурдужа]

Наверное я понял, если не так, то можете меня поправить.

dispatch нужно вызвать только на странице, а не в блоках. Вот как я реализовал на главной.

async fetch({ store }) {
    try {
      if (store.getters['home/home'].length === 0) {
        await store.dispatch('home/fetchHome');
      }
      if (store.getters["solutions/getSolutions"].length === 0) {
        await store.dispatch('solutions/fetchSolutions');
      }
      if (store.getters["tipo/getTipo"].length === 0) {
        await store.dispatch('tipo/fetchTipo');
      }
    } catch (e) {
      console.log(e, 'e')
    }

А в блоках вызвать уже гетеры.

Есть, конечно и способ в store/index.js вызвать nuxtServerInit, и туда вызвать все dispatch.

Только я не знаю, если у меня будут много запросов, то сайт не будет слишком долго открыватся в первый раз?