As a newcomer to coding and using vue cli, along with my limited English skills, I apologize if I am unable to articulate the issue clearly. However, I am reaching out to the community for assistance.
The code snippet below is from store.js where I fetch JSON data from the server and aim to pass it to child components.
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;
}
},
});In this file, home.vue component displays the data with a router link that should redirect me to the next component. The router link expects the item's 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>This file represents the page with details for each item. **The problem arises when I refresh the page as it displays an empty list**
I suspect that my approach might be incorrect but I lack understanding of why this happens and how to rectify it. It's possible I'm not utilizing the framework correctly.
Any recommendations or suggestions are greatly appreciated.
Thank you in advance
<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>