プリフェッチvuexを使用して、データとVUE-リソース

Question

私はこのような構造以下のアプリを構築しています。このようなhttp://vuex.vuejs.org/en/structure.html

マイcomponents/App.vue：

<template> 
<div id="app"> 
    <course :courses="courses"></course> 
</div> 
</template> 

<script> 
import Course from './course.vue' 
import { addCourses } from '../vuex/actions' 

export default { 
    vuex: { 
    getters: { 
     courses: state => state.courses,   
    }, 
    actions: { 
     addCourses, 
    } 
    }, 

    ready() { 
    this.addCourses(this.fetchCourses()) 
    }, 

    components: { Course }, 

    methods: { 
    fetchCourses() { 
     // what do I have to do here 
    } 
    } 
} 
</script> 

はどうやってデータをフェッチし、それを設定することができますがstate.courses？

おかげ

Answer 1

は、私はちょうどそれを考え出した：/components/App.vueready機能で
を、私はちょうど呼び出し：vuex/actions.jsで

ready() { 
    this.addCourses() 
    }, 

：

import Vue from 'vue' 

export const addCourses = ({ dispatch }) => { 
    Vue.http.get('/api/v1/courses') 
    .then(response => { 
     let courses = response.json() 

     courses.map(course => { 
     course.checked = false 
     return course 
     }) 

     dispatch('ADD_COURSES', courses) 
    }) 
} 

とvuex/store.jsで：

const mutations = { 
    ADD_COURSES (state, courses) { 
    state.courses = courses 
    } 
}