Я новичок в VueJS и пытаюсь создать приложение, которое извлекает контент из экземпляра WordPress, используя VueJS, Nuxt и Vuex и WordPress REST API.Я могу подключиться к API, и у меня есть содержимое, загружаемое через состояние, но я не могу понять, как получить эти данные из состояния и в шаблон.Все, что я пробую, приводит к ошибкам «х не является функцией» или «х не определен».
Я просматривал различные посты в блоге в Интернете, но не могу найти решение, которое работает.Где я ошибаюсь?
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
страниц / explore / _slug / index.vue (родительский компонент)
<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>
import layoutBrowserupgrade from '~/components/layout/browserupgrade.vue'
import layoutToolbar from '~/components/layout/toolbar.vue'
import layoutHero from '~/components/layout/heroStatic.vue'
import layoutFooter from '~/components/layout/footer.vue'
import layoutNav from '~/components/layout/nav.vue'
import exploreDetail from '~/components/pages/detail.vue'
const axios = require('axios');
export default {
components: {
layoutBrowserupgrade,
layoutToolbar,
layoutHero,
layoutFooter,
layoutNav,
exploreDetail
},
created: function() {
this.$store.dispatch('getExplore')
},
data: function() {
return {
navState: 'menu-closed',
feedLoaded: false,
pageDetails: [],
pageId: null,
pageType: 'single',
pageName: this.$nuxt.$route.params.slug
}
},
mounted: function() {
this.pageId = this.$nuxt.$route.params.pageId;
},
watch: {
feedLoaded: function() {
if (this.feedLoaded == true) {
this.pageId = this.pageDetails.id;
} else {
console.log('Feed did not load')
}
}
},
methods: {
showHideNav: function(event) {
if (this.navState == 'menu-closed') {
this.navState = 'menu-open'
} else {
this.navState = 'menu-closed'
}
}
}
}
</script>
pages / detail.vue (Компонент Page Detail - Одна страница)
<template>
<main class="main detail-page">
<div>
<h1>Explore {{ title.rendered }}</h1>
<div class="detail-wrapper">
<section class="detail-intro detail-content-block"></section>
<section class="detail-map">
<p>Map</p>
</section>
</div>
<section class="detail-history">
<h1>History</h1>
<div class="detail-content-block"></div>
</section>
<section class="detail-wildlife">
<h1>Wildlife and Flora</h1>
<div class="detail-content-block"></div>
</section>
<section class="detail-places">
<h1>Places to See</h1>
</section>
<section class="detail-facilities">
<h1>Accommodation and Facilities</h1>
<div class="detail-content-block"></div>
</section>
<section class="detail-gettingthere">
<h1>Getting to </h1>
<div class="detail-content-block"></div>
</section>
</div>
</main>
</template>
<script>
export default {
created: function() {
},
data: function() {
return {
pageName: this.$nuxt.$route.params.slug,
pageRef: null,
pageContent: null,
pageType: 'single'
}
},
computed: {
exploreContent: function() {
return this.$store.state.explore
},
getSinglePage: function() {
return this.$store.state.pages
}
},
mounted: function() {
},
methods: {
}
}
</script>
<style lang="scss">
.detail-page {
h1 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
background-color: $crimson;
color: #fff;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 20px;
font-family: $font-title;
font-size: 28px;
font-weight: 400;
line-height: 1;
letter-spacing: 2px;
}
p {
font-family: $font-default;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
}
.detail-wrapper {
display: grid;
}
.detail-intro {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.detail-map {
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
min-width: 40vw;
min-height: 100%;
background-color: #cccccc;
text-align: center;
align-items: center;
justify-content: center;
p {
align-self: center;
justify-self: center;
}
}
.detail-content-block {
padding: 40px;
}
</style>
Я удалил всю интерполяцию данных для тестированияпросто чтобы посмотреть, смогу ли я заставить одну часть работать.
Может кто-нибудь указать на некоторые документы, которые могут мне помочь, или показать, где я ошибаюсь?Я думаю, что у меня есть правильная часть магазина, это все, что подводит меня.
Оцените любую помощь, которая может быть предложена, так как у меня не хватает времени, чтобы понять это.
Спасибо!
Алекс