如何在 vue js 中从服务器获取数据？

Posted 2023-02-22

【中文标题】如何在 vue js 中从服务器获取数据？

【英文标题】：How to fetch data from server in vue js?

【发布时间】：2018-02-11 22:33:39

【问题描述】：

我正在尝试使用 Vue + Vuex + Vue 资源从服务器获取数据。单击按钮时我想点击 Http 请求并以列表格式显示。我尝试过这样。这是我的代码

https://plnkr.co/edit/EAaEekLtoiGPvxkmAtrt?p=preview

// Code goes here

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

        

    ,
    actions: 
        fetchData:function (context) 
            this.$http.get('/data.json', function(v1users)
                
                   // this.$set('v1_user',v1users);
            );
        
    
)

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


)

; 有更新吗？

【参考方案1】：

尝试使用Vue.http.get 而不是this.$http.get。

Vuex 无法直接从实例访问$http。

【讨论】：

你能分享一下plunker吗

我该怎么做？

不需要 plunker.. 只需在您的代码中将 this.$http.get 替换为 Vue.http.get 即可。这是你唯一需要做的改变。

我能够获取数据。但是我将如何将这些数据传递给组件

你需要在 vues action 中返回 promise。以下是有关如何做到这一点的更多详细信息：***.com/questions/40165766/…