Пустой массив после обновления страницы Vue.js и axios - PullRequest
Новая
       21

Пустой массив после обновления страницы Vue.js и axios

0 голосов
/ 13 марта 2019

Я новичок в кодировании, с vue cli и мой английский не очень хорош, так что извините, если я не очень хорошо объясню проблему, но я постараюсь, потому что сообщество - мой последний вариант.

Это store.js, который я получаю с сервера json и предполагаю передать данные дочерним компонентам.

store.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import VueAxios from "vue-axios";
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.use(Vuex);
Vue.use(VueAxios, axios);


export default new Vuex.Store({
  state: {
    beers: [],
    isLoaded: false
  },
  actions: {
    async loadCoins({ commit }) {
      axios
        .get("https://api.punkapi.com/v2/beers")
        .then(r => r.data)
        .then(beers => {
          commit("SET_BEERS", beers);
          commit("BEERS_LOADED", true);
        });
    }
  },
  mutations: {
    SET_BEERS(state, beers) {
      state.beers = beers;
    },
    BEERS_LOADED(state, isLoaded) {
      state.isLoaded = isLoaded;
    }
  },
});

Этот файл является компонентом home.vue, в котором я представляю свои данные, и существует ссылка на маршрутизатор, которая должна перенаправить меня к следующему компоненту.Ожидается ссылка на маршрутизатор для идентификатора элемента 

  <template>
  <div>
    <div
      v-for="(value,index) in  beers"
      :key="index"
    >
      <router-link :to="{ path: `/about/${value.id}`}">
        <img
          class="logo lazy img-responsive loaded"
          v-bind:src="value.image_url"
        />
        <div>{{value.name}}</div>
        <div> {{value.tagline}}</div>
      </router-link>
    </div>
  </div>
</template>
    <script>
const _ = require("lodash");
import { mapState } from "vuex";
import Carousel from "@/components/carousel.vue";

export default {
  name: "home",
  components: {
    Carousel
  },
  data() {
    return {
      // filteredBeers: []
    };
  },
  mounted() {
    this.$store.dispatch("loadCoins");
    // this.test();
  },
  created() {},
  computed: {
    ...mapState(["beers", "isLoaded"]),
    consoleMyLog() {
      return this.isLoaded;
    }
  }
};
</script>

Этот файл представляет собой страницу с подробной информацией о каждом элементе.** И проблема здесь, когда я обновляю страницу, я получаю пустой список **

Я думаю, что подход неправильный, но я понятия не имею, почему это произошло и как исправить, можетя не пользуюсь фреймворком хорошо.

Так что любая рекомендация приветствуется.

Заранее спасибо

<template>
     <div>
          <img
            class=" logo" 
            v-bind:src="selectedArticle[0].image_url"
          />
          <h2 class="beer-title">
            {{selectedArticle[0].name}}
          </h2>
          <h3 class="beer-style">
            {{selectedArticle[0].contributed_by}}
          </h3>
     </div>
</template>


<script >
const _ = require("lodash");
import { mapState } from "vuex";

import Carousel from '@/components/carousel.vue'
export default {
  name: "about",
  props: {
    //  proId: this.$route.params.Pid,
  },
  components: {
    Carousel,
 
 },
  data() {
    return {
      

    };
  },
  computed: {
    // return the beers obj filter it by id and match it with route_id
    selectedArticle() {
      return this.$store.state.beers.filter(
        beer => beer.id == this.$route.params.id
      );
    }
  },
  mounted() {

   
  },
  }
</script>

1 Ответ

1 голос
/ 13 марта 2019

Не могу сказать наверняка, но похоже, что home и about - это два разных маршрута.

, поэтому взаимодействие

  • ваш домашний компонентзагружает данные
  • пользователь переходит к примерно, и страница отображается ОК
  • пользователь обновляет, и теперь он не работает

Если это так, причина получения ошибки ясна.Домашний компонент загружает данные в обработчик mounted.Когда вы обновляете и находитесь в компоненте about, действие по загрузке данных больше не выполняется.

Чтобы это исправить, существует несколько способов, отличающихся надежностью, простотой и масштабируемостью, ноосновываясь только на коде, который я видел, я бы сказал, что самый быстрый способ исправить это обновить подключенный обработчик в about.vue

mounted() {
  if (this.$store.state.beers.length === 0) this.$store.dispatch("loadCoins");
},
...