Vuex и axios, удаленный контент не отображается при начальной загрузке страницы - PullRequest
Новая
       8

Vuex и axios, удаленный контент не отображается при начальной загрузке страницы

0 голосов
/ 05 мая 2018

билась мне в голову об этом в течение дня или около того, и теперь вы мне нужны на помощь.

Я создаю сайт vue.js, управляемый rest-api. Я использую vuex-rest-api, чтобы получить данные из копии WordPress и затем вывести их на страницу.

Проблема в том, что мои данные не отображаются при загрузке, выдавая ошибку Ошибка при рендеринге: «Ошибка типа: Невозможно прочитать свойство title из undefined», , Как только я начинаю вносить изменения в код и веб-пакет выполняет горячую перезагрузку при сохранении показа контента. Похоже, что данные не доступны при загрузке страницы. Я не могу разобраться с моими нынешними знаниями, как это исправить.

Я пробовал разные хуки жизненного цикла (например, beforeCreated ()) для getPosts (), но это не помогло.

Вот код.

posts.js импорт Vapi из "vuex-rest-api" 

const pages = new Vapi({
  baseURL: "http://localhost:8888/wp-json/wp/v2",
  state: {
    pages: []
  }
})
.get({
  action: "getPosts",
  property: "pages",
  path: "/pages"
})
.getStore()


export default pages

Home.vue 

<template>
    <div class="container header header--home">

    <h2 v-for="item in title" :key="item.id" v-html="item"></h2>
    <p v-for="item in content" :key="item.id" v-html="item"></p>

</div>
</template>

<script>

import { mapState, mapActions } from 'vuex'
export default {
  created() {
    this.getPosts()
  },
  computed: mapState({
    content: state => state.posts.pages[0].content,
    title: state => state.posts.pages[0].title,
  }),
  methods: {
    ...mapActions([
      "getPosts",
    ])
  }
}

</script>

Ответы [ 2 ]

0 голосов
/ 05 мая 2018

Отличный материал, который Ру предложил выше.

Немного подправил код: 

computed: mapState({
    pages: state => state.posts.pages,
}),

Каким-то образом сообщения должны упоминаться с помощью vuex-rest-api, который я использую.

Кроме того, чтобы получить правильные данные из wordpress rest-api, мне пришлось немного отрегулировать цикл: 

<div class="col-sm" v-for="item in pages" :key="item.id">
    <h2 v-html="item.title.rendered"></h2>
    <p v-html="item.content.rendered"></p>
</div>

Спасибо!

0 голосов
/ 05 мая 2018

У вас есть мисс типа mapState с постами, но свойства постов нет. L18-19 вашего файла Home.vue Существует неверное толкование типа между страницами как Array и содержимым / заголовком как String. L4-5 вашего Home.vue файла

Home.vue 

<template>
   <div class="container header header--home">
      <div v-for="item in pages" :key="item.id">
         <h2 v-html="item.title"></h2>
         <p v-html="item.content"></p>
      </div>

   </div>
</template>

<script>
   import { mapState, mapActions } from 'vuex'
   export default {
      created() {
         this.getPosts()
      },
      computed: {
        ...mapState({
          pages: state => state.pages
        })
      },
      methods: {
         ...mapActions([
            "getPosts",
         ])
      }
   }
</script>
...