使用 vuex 和 vue-resource 预取数据

【问题标题】：Pre-fetch data using vuex and vue-resource使用 vuex 和 vue-resource 预取数据
【发布时间】：2016-11-15 01:14:09
【问题描述】：

我正在按照以下结构构建应用程序：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？

谢谢

【问题讨论】：

标签： vue.js vue-resource vuex

【解决方案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
  }
}

【讨论】：