SPAの初心者です。何卒ご教授宜しくお願いします。
はじめから躓いていることは、Vueで自作のAPIからデーター(記事の配列)を取得して、vuexにあるstateのpostsにその情報を格納したいです。
自分のコードを一部抜粋しました。
その後にエラー画面を載せます。
Top.vue
javascript
1<template> 2<div> 3 <p> 4 トップページ 5 </p> 6</div> 7</template> 8 9<script> 10import { mapState, mapActions } from 'vuex' 11 12import axios from 'axios' 13 14export default { 15 name: 'top', 16 created: function() { 17 this.fetchAddPost() 18 }, 19 computed: { 20 ...mapState([ 21 'posts' 22 ]) 23 }, 24 methods: { 25 ...mapActions([ 26 'fetchAddPosts' 27 ]), 28 fetchAddPost: function() { 29 const new_axios = axios.create({ 30 headers: { 31 'Content-Type': 'application/json' 32 }, 33 responseType: 'json' 34 }); 35 const endpoint = '/api/posts/' 36 new_axios.get(endpoint) 37 .then(function(response) { 38 /**********ここがスクショした概要の箇所です。************/ 39 console.log(response.data) 40 this.fetchAddPosts(response.data) 41 42 }) 43 .catch(function(error) { 44 console.log('エラーだよ', error); 45 }) 46 } 47 48 } 49} 50</script> 51 52<style> 53 54</style>
store.js
javascript
1import Vue from 'vue' 2import Vuex from 'vuex' 3 4Vue.use(Vuex) 5 6export default new Vuex.Store({ 7 state: { 8 posts: [] 9 }, 10 mutations: { 11 FETCH_ADD_POSTS: (state, posts) => { 12 state.posts = posts 13 } 14 }, 15 actions: { 16 fetchAddPosts: (context, posts) => { 17 context.commit('FETCH_ADD_POSTS', posts) 18 } 19 } 20})
↑の画像のように、APIからのデータは上手く取得しているのですがvuexでのデーターのストックが上手く行きません。。。
どなたかわかる方いたらご教授宜しくお願いします。
vueとvuexの接続は上手くいっております。↑の2つのTop.vueとstore.jsが問題の部分かと思います、
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/13 10:30