javascript - vue.js中如何向组件发送数据？

Question

如何将数据发送到 Vue.js 中的组件？我在按钮单击事件上收到了服务器的响应，现在我想将此响应发送到组件并使用 v-for 显示在 list 上。

这是我的代码:

var store = new Vuex.Store({
    state: {
        Item: []
    },
    mutations: {
        getItems: function (state) {

        }

    },
    actions: {
        fetchData:function (context) {
           Vue.http.get('data.json').then(function(response){
             alert('dd')
}, function(error){
    console.log(error.statusText);
});

        }
    }
})

var httprequest = Vue.extend({
    "template": '#http_template',
    data: function () {
        return {
            items: store.state.Item
        }
    },
    methods: {
        fetchData: function () {
          store.dispatch('fetchData')
        },

    }
})

Vue.component('httprequest', httprequest);

var app = new Vue({
    el: '#App',
    data: {},


});

Answer 1

你几乎已经完成了所有正确的事情。您唯一缺少的是在获取数据后，您没有将其分配给state.Item。请检查以下代码:

var store = new Vuex.Store({
    state: {
      Item: []
    },
    mutations: {
      getItems: function(state, items) {
        items.forEach(function(item) {
          state.Item.push(item)
        })
      }
    },
    actions: {
      fetchData: function(context) {
        Vue.http.get('data.json').then(function(response) {
          context.commit('getItems', response.data)
        }, function(error) {
          console.log(error.statusText);
        });
      }
    }
  })

可以找到工作示例 here .