I'm currently delving into the world of VueJS with an aspiration to construct an app that fetches content from a WordPress instance using VueJS, Nuxt and Vuex in conjunction with the WordPress REST API. I've managed to establish a connection with the API, retrieve the content through state, but unfortunately, I'm stuck on how to transfer that data from state to the template. Every attempt I make leads to "x is not a function" or "x is not defined" errors.
Despite scouring various blog posts online, I haven't been able to find a solution that resolves my issue. Where might I be going astray?
store/index.js
import Vuex from "vuex";
import axios from "axios";
const createStore = () => {
return new Vuex.Store({
state: {
explore: null,
pages: null
},
actions: {
getExplore: function(context) {
return new Promise((resolve, reject) => {
if (context.state.explore) {
resolve()
}
else {
axios.get(path_to_api_endpoint)
.then((response) => {
context.commit('storeExplore', response.data)
resolve()
}).catch((error) => {
reject(error);
});
}
})
},
getSinglePage: function() {
return new Promise((resolve, reject) => {
this.$store.dispatch('getExplore')
.then(() => {
var foundPage = false;
this.$store.state.pages
.filter((page) => {
if(pageName === this.$route.params.slug) {
this.singlePage = page;
foundPage = true;
}
});
foundPage ? resolve() : reject();
})
})
}
},
mutations: {
storeExplore(state, response) {
state.explore = response
},
storePages(state, response) {
state.pages = response }
}
})
}
export default createStore
pages/explore/_slug/index.vue (Parent Component)
<template>
<div>
<layout-browserupgrade></layout-browserupgrade>
<div class="wrapper" :toggle-nav="showHideNav" :class="navState">
<layout-toolbar @showHideNav="showHideNav"></layout-toolbar>
<layout-hero :pageRef="pageId"></layout-hero>
<explore-detail></explore-detail>
<layout-footer></layout-footer>
</div>
<layout-nav></layout-nav>
</div>
</template>
<script>
...
...
...
</style>
I have temporarily excluded the data interpolation for testing purposes, just focusing on getting one section to function correctly.
If anyone could point me towards relevant documentation or provide insight into where I may be faltering, I would greatly appreciate it. Time is running short, and I am struggling to crack this puzzle.
Thank you!
Alex