Question

我是编码的新手，vue cli和我的英语都不太好，所以如果我不能很好地解释这个问题，请原谅我，但我会尽力，因为社区是我的最后选择。

这是我从服务器获取json并假设将数据传递给子组件的store.js。

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组件，我提供了我的数据，并且有一个路由器链接应将我重定向到下一个组件。路由器链接需要输入商品的ID

  <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>

Answer 1

我无法确定，但是home和about确实是两条独立的路线。

所以互动是

您的家庭组件将加载数据
用户导航至，页面呈现正常
用户正在刷新，现在无法正常工作

是这种情况，很清楚导致错误的原因。 home组件将数据加载到mounted处理程序中。当您刷新时，您现在位于about组件中，将不再执行加载数据的操作。

要解决此问题，有几种方法在健壮性，易用性和可伸缩性上有所不同，但是仅根据我所看到的代码，我想说解决此问题的最快方法是更新{{1 }}

about.vue

页面刷新Vue.js和axios之后的空数组

1 个答案: