如何将数据从 vue-resource 方法传递到 vue 组件中的视图层？

Question

我有一个 resource.js，它是一个导出的 ES6 类：

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export class Resource {

  getMovies () {
      // GET /someUrl
    return Vue.http.get('http://localhost:3335/cardname').then((response) => {
      console.log('success')
      return response
    }, (response) => {
      console.log('problem')
      return response
    })
  }

}

然后我将它导入到我的组件中并在视图/组件中传递数据：

<script>
  import { movies } from '../mock'
  import { Resource } from '../services/resource'
  const resourceService = new Resource()
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'MovieRama',
        count: 0,
        movies: movies.movies,
        totalMovies: movies.total,
        test: null
      }
    },
    mounted: function () {
// Note this part
      let that = this
      resourceService.getMovies().then(function (result) {
        that.test = result
      })
    },
    methods: {
      boom: function () {
        console.log('Woho')
      },
      updateCount: function () {
        this.count++
      }
    }
  }
</script>

请注意mounted 方法。为什么我需要保持这样的范围才能在 data () { } 中传递数据？

我正在查看 vue.js 文档，这似乎没有必要：

http://vuejs.org/guide/instance.html#Instance-Lifecycle-Hooks

Answer 1

由于您使用了匿名函数，因此当您调用this 时，它有自己的作用域。如果你使用箭头函数，你可以摆脱它

resourceService.getMovies().then((result) => {
  this.test = result
})

我还建议查看创建资源的文档：https://github.com/vuejs/vue-resource/blob/master/docs/resource.md

这是一种创建自动具有get、update、delete 等方法的类的方法。