Блог

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

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

#javascript #vue.js #axios #router

#javascript #vue.js #axios #маршрутизатор

Вопрос:

Я новичок в программировании, использую 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:

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

таким образом, взаимодействие

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

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

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

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