Vue.js 3. Не обновленный набор данных с помощью vuex - PullRequest
Новая
       28

Vue.js 3. Не обновленный набор данных с помощью vuex

0 голосов
/ 17 октября 2019

Проблема заключается в следующем. В vuex я делаю запрос API для получения данных, и следующий цикл для каждого объекта - получение изображения. Так вот, картинку получите, один мутационный набор данных сохраните, а картинку в src вывести не могу. консоль показывает, что существует код base64, и когда вы выводите объект на страницу, свойства со ссылкой не существуют. html (мопс): 

.home__films
  +b(v-if="!filmsLoaded").I.loader.fa.fa-spinner.fa-spin
  +b(v-else="" v-for="film in updatedFilms").film
    <!--+e.IMG(src="http://placehold.it/260x85?text=Placeholder").poster-->
    +e.IMG(:src="film.poster").poster
    +e.description
      +e.name {{ film.title }}
      +e.producer {{ film.producer }}

vue компонент: 

<script>


import {mapGetters} from "vuex";

  export default {
    name: "Home",
    data: function () {
      return {
        size: 3,
        page: 1,
        hideButton: false,
        filmsLoaded: false,
        films: false,
        search: '',
      };
    },
    computed: {
      ...mapGetters({
        filmsData: 'films/filmsData',
      }),
      updatedFilms() {
        return this.films
      }
    },
    async created() {
      await this.$store.dispatch('films/getAllFilms');
      this.films = this.basicCountFilms();
      this.filmsLoaded = true;
    },
    mounted() {},
    methods: {
      basicCountFilms() {
        const end = this.page * this.size;
        return this.filmsData.slice(0, end);
      },
      nextPage() {
        this.page++;
        this.films = this.basicCountFilms();

        if ((this.page * this.size) >= this.filmsData.length) {
          this.hideButton = true;
        }
      },
      filteredFilms() {
        this.films = this.filmsData.filter((e) => {
          return e.title.toLowerCase().indexOf(this.search.toLowerCase()) >= 0;
        });

        if (this.search === '') {
          this.films = this.basicCountFilms();
        }
      },
    },
  }
</script>

vuex: 

import axios from "axios";

export default {
  namespaced: true,

  state: {
    all: false,
    error: false,
  },
  getters: {
    filmsData: state => state.all,
  },
  mutations: {
    FILMS_UPDATED: (state, response) => {
      state.all = response;
    },
    SET_ERROR: (state, error) => {
      state.error = error;
    },
  },
  actions: {
    getAllFilms: async ({ commit, rootGetters}) => {
      await rootGetters.HTTP.get('https://swapi.co/api/films/').then(async (response) => {
        let films = response.data.results;

        await films.forEach(function (film) {
          axios.get('https://pixabay.com/api/', {
            params: {
              key: '13946176-5efe0deaabd8f5d7a020a0ba7',
              q: film.title
            }
          }).then((response) => {
            film.poster = !response.data.totalHits ? 'http://placehold.it/260x85?text=Placeholder' : response.data.hits[0].webformatURL;
          }, (err) => {
            commit('SET_ERROR', err);
          });
        });
        commit('FILMS_UPDATED', films);
      }, (err) => {
        commit('SET_ERROR', err);
      });
    },
  },
};
...