Vue получение данных с сервера - PullRequest
Новая
       25

Vue получение данных с сервера

0 голосов
/ 10 ноября 2018

Сразу хочу сказать, что я познакомился с vue не так давно.
Теперь у меня проблема.

Я получаю данные с сервера.

// магазин
импортировать PostService из '../services/PostService'

export default {
  state: {
    posts: [],

  },
  actions: {
    async getPost() {
      const response = await PostService.fetchPosts();
      console.log(response.data.posts);

      this.posts = response.data.posts

    }
  }
}

Существует массив данных и запрос к серверу. В response данные поступают. 

// vue component 
<template>
    <section class="posts--wrap">
        <div class="posts wrapper">
            <h1>Posts</h1>
            <div
                    class="posts__item--wrap"
                    v-if="this.allPosts.length"
            >
                <h3>List of posts</h3>
                <div
                        v-for="(post, index) in allPosts"
                        :key="index"
                        class="posts__item">
                    <h3 class="posts__item-title">{{post.title}}</h3>
                    <p class="posts__item-text">{{post.description}}</p>
                </div>
            </div>
            <div
                    v-else
                    class="posts__item-error"
            >
                <h3>There are no posts ... Lets add one now!</h3>
                <router-link tag="div" :to="{name: 'Add'}">
                    <a>Add new post ;)</a>
                </router-link>
            </div>
        </div>
    </section>
</template>

<script>
    import { mapState } from 'vuex';
    import { mapActions } from 'vuex';

    export default {
      name: 'PostPage',
      data () {
        return {

        }
      },
      computed: mapState({
        allPosts: state => state.posts.posts
      }),
      methods: {
        ...mapActions({
          getAllPosts: 'getPost'
        })
      },
      mounted() {
        console.log(this.allPosts);
        this.getAllPosts();
      }
    }
</script>

Если добавить что-то к state.posts, оно будет отображаться на странице.

Но я не могу понять, как получить данные из response в posts Я прошу о помощи или намеки. Спасибо!

UPD Внесены изменения, для которых отображается response

response.log 

(2) [{…}, {…}]
0: {_id: "5be4bbfaad18f91fbf732d17", title: "Title post 1", description: "esxdfgdfghj"}
1: {_id: "5be490f930fba81a704867f6", title: "2312", description: "312312312"}
length: 2
__proto__: Array(0)

1 Ответ

0 голосов
/ 10 ноября 2018

Вы сделали неправильно в своем действии getPost, правильный способ изменить состояние с помощью действия - зафиксировать mutation с помощью параметра действия context, например: 

...
mutations: {
    setPosts(state, posts) {
        state.posts = posts;
    },
},
actions: {
    async getPost(context) {
        /* ... */
        context.commit('setPosts', response.data.posts);
    }
},
...

Подробнее о действиях Vuex .

...