使用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功能
，我只要致电：

ready() { 
    this.addCourses() 
    }, 

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

和vuex/store.js：

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