состояние не определено в компонентах, хотя я использую mapGetters для доступа к нему

Question

У меня есть магазин и компонент. В моем компоненте и в created() я выполняю выборку API, поэтому мое состояние меняется, а также в computed я использую mapGetters, чтобы я мог получить доступ к своему состоянию. Но когда я это делаю, на экране ничего не отображается. Я даже использую директиву v-if, чтобы узнать, не определено значение или нет. Также я должен упомянуть, что в Vue devtools я ясно вижу, что состояние обновляется правильно, и я вижу, что данные извлекаются из API. Я уже столько искал в Интернете и пробовал все, что мог найти. Сработало только одно решение, и в моем компоненте также должны были быть данные, но это решение не является хорошим решением из-за дублирования данных (один локальный для компонента и один в магазине). Вот мой код:

фильмы. js (магазин)

import axios from 'axios';

const state = {
  heading: '',
  movies: [],
};

const getters = {
  getMovies: (state) => state.movies,
  getHeading: (state) => state.heading,
};

const actions = {
  async fetchTopRatedMovies({ commit }) {
    const res = await axios.get(
      `https://api.themoviedb.org/3/movie/top_rated?api_key=${process.env.VUE_APP_THEMOVIEDB_API_KEY}&language=en-US&page=1`
    );

    commit('setMovies', res.data.results);
    commit('setHeading', 'Top Rated Movies');
  },
};

const mutations = {
  setMovies: (state, movies) => (state.movies = movies),
  setHeading: (state, heading) => (state.heading = heading),
};

export default {
  state,
  getters,
  actions,
  mutations,
};

фильмы. vue (компонент)

<template>
  <div v-if="!heading || !movies">
    <Spinner />
  </div>
  <div v-else>
    <h5 class="center">{{ heading }}</h5>
    <div v-for="movie in movies" :key="movie.id">
      <p>{{ movie.title }}</p>
    </div>
  </div>
</template>

<script>
import Spinner from '../layout/Spinner';
import { mapActions, mapGetters } from 'vuex';

export default {
  name: 'Movies',

  components: {
    Spinner,
  },

  methods: {
    ...mapActions(['fetchTopRatedMovies']),
  },

  computed: {
    ...mapGetters(['getMovies', 'getHeading']),
  },

  created() {
    this.fetchTopRatedMovies();
  },
};
</script>

<style></style>

Один из способов решить эту проблему - изменить computed на:

    computed: {
    ...mapGetters({
      heading: 'getHeading',
      movies: 'getMovies',
    }),
  },

, но мне интересно, почему это должно быть так. Потому что в документации это написано так же, как и в приведенном выше коде.

Answer 1

computed: {
  ...mapGetters({
    heading: 'getHeading',
    movies: 'getMovies',
  }),
},

Приведенный выше код работает, и причина в том, что в вашем состоянии вы используете v-if="!heading || !movies", а также присваиваете значения переменным headings и movies в вычисленных свойствах.

Но когда вы используете код, подобный указанному ниже, поскольку переменные, которые вы используете в своем состоянии, не объявляются в вашем приложении, поэтому оно не работает.

Если вы хотите написать код, как показано ниже, вы может напрямую использовать эти свойства получения getMovies и getHeading в вашем приложении (как вы используете свойства данных). Так что в этом случае в вашем состоянии, если вы напишете как v-if="!getHeading|| !getMovies", он будет работать.

computed: {
  ...mapGetters(['getMovies', 'getHeading']),
},