Can anyone explain why the json data I fetch with axios is not populating my state.pages as expected? Interestingly, when I make a change to the file and vite reloads, the data appears on the page. However, it disappears again upon refreshing the browser.
PageView:
<template>
<main v-if="page">
<h1>{{ page.title }}</h1>
<div class="content" v-html="page.content"></div>
</main>
<main v-else>
<h1>loading</h1>
</main>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
data() {
return {
page: null,
};
},
methods: {
...mapActions({ getPages: "getPages" }),
},
computed: {
slug() {
return this.$route.params.slug;
},
getPage() {
console.log(this.$store.state.pages);
return (this.page = this.$store.state.pages.find(
(page) => page.slug === this.slug
));
},
},
mounted() {
this.$store.dispatch("getPages");
this.getPages();
this.getPage;
},
};
</script>
<style>
</style>
Vuex index:
import { createStore } from 'vuex';
import axios from 'axios';
const store = createStore({
state() {
return {
pages: [],
};
},
mutations: {
setPages(state, { response }) {
state.pages = response.data;
},
},
actions: {
getPages({ commit }) {
axios.get('../src/data/pages.json').then((response) => {
commit('setPages', { response });
});
},
},
getters: {},
});
export default store;