javascript - 页面刷新Vue.js和axios后的空数组
问题描述
我是编码新手,使用 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>
解决方案
home
我不能确定,但它看起来确实about
是两条独立的路线。
所以交互是
- 你的 home 组件加载数据
- 用户导航到 about 并且页面呈现正常
- 用户刷新,现在它不起作用
如果是这种情况,那么出现错误的原因就很清楚了。home 组件在处理程序中加载数据mounted
。当您刷新并且您现在位于about
组件中时,将不再执行加载数据的操作。
为了解决这个问题,有几种方法在健壮性、易用性和可扩展性方面有所不同,但仅基于我看到的代码,我想说修复它的最快方法是更新已安装的处理程序about.vue
mounted() {
if (this.$store.state.beers.length === 0) this.$store.dispatch("loadCoins");
},
推荐阅读
- node.js - Google Android Publisher API inappproducts.insert 权限错误
- python - 显示框的属性
- java - JPARepository 未保存到数据库
- python - 用 pandas 过滤 CSV
- zsh - 向 .zshrc 添加函数会更改命令
- swift - 在尝试子类化 uibezierPath 时出现编码错误中的参数缺少参数
- react-native-sensors - react-native-sensors 错误:传感器的本机模块不可用。react-native 链接是否运行成功?
- javascript - 嵌套在 mat-tab 中的组件是否有生命周期挂钩?
- javascript - 为不同的模态获取相同的图像
- python - 如何使用 Python 正则表达式选择所有内容,直到模式