Prefetch-Daten unter Verwendung von vuex und vue-Ressource

Question

Ich baue eine App im Anschluss an diese Struktur: http://vuex.vuejs.org/en/structure.html

Meine components/App.vue wie folgt aus:

<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> 

Wie kann ich die Daten abrufen und setzen Sie ihn auf die state.courses?

Dank

Answer 1

Ich habe gedacht, es einfach aus:
in /components/App.vueready Funktion, ich nenne nur:

ready() { 
    this.addCourses() 
    }, 

in vuex/actions.js:

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) 
    }) 
} 

und in vuex/store.js: