javascript - Vue.js 和 axios 页面刷新后数组为空

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 是两条独立的路线。

所以交互是

• 您的主组件加载数据
• 用户导航到 about 并且页面呈现正常
• 用户刷新，但现在不起作用

如果是这样，出现错误的原因就很清楚了。 home 组件在 mounted 处理程序中加载数据。当你刷新时，你 现在位于 about 组件中，不再执行加载数据的操作。

为了解决这个问题，有几种方法在鲁棒性、易用性和可扩展性方面有所不同，但仅基于我见过的代码，我认为解决它的最快方法是更新 中安装的处理程序about.vue

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