Vue.js 如何使用axios从vuex中的API获取数据？

我有来自API laravel的数据，下面是我在state.js中的代码

import axios from 'axios'
import {apiPostGet} from '../api/api'
export default {
  data: axios({
    method: 'GET',
    url: apiPostGet('Kategori')
  }).then(
    response => {
      return response.data.kategori
    }
  ).catch(
    error => {
      return error.response
    }
  )
}

这是我在gteeters.js中的代码

export default {
  datas: state => {
    return state.data
  }
}

这是我在index.js中的代码

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
   state,
   getters
})

---

数据

钩子需要同步返回。您必须将加载添加到

created

或

mounted

，只需将属性添加到data/state，这样反应性就可以工作了

使用Axios加载数据需要通过操作触发，因为它是异步的。突变需要同步运行。我已经在

created

中添加了初始加载。（

mounted

也可以。）

我已经使用Vuex helper

mapState

将状态属性映射到组件。使用getter也可以，但是

mapState

更容易编写

请看下面的演示或这个

还可以在fiddle中取消Vuex版本下面的代码注释，并对上面的应用程序进行注释，以了解Axios如何使用Vuex，从而更好地理解

consturl='1〕https://jsonplaceholder.typicode.com/posts';
const store=新的Vuex.store({
声明：{
员额：[]，
加载：正确
},
行动：{
加载数据({
犯罪
}) {
获取（URL）。然后（（响应）=>{
//console.log（response.data，this）
提交（'updatePosts'，response.data）
提交（'changeLoadingState'，false）
})
}
},
突变：{
更新站点（状态、帖子）{
state.posts=posts
},
更改加载状态（状态，加载）{
state.loading=加载
}
}
})
新Vue({
el:“#应用程序”，
计算：Vuex.mapState（['posts'，'loading']），
商店，
创建（）{
//console.log（此.$store）
这是。$store.dispatch（'loadData'）//调度加载
}
})
/*
//不带vuex的示例
新Vue({
el:“#应用程序”，
数据（）{
返回{
加载：对，
posts:[]//在这里添加posts，这样反应性就可以工作了，也可以不定义
}
},
创建（）{
//this.loading=true-->不需要在数据中设置
获取（URL）。然后（（响应）=>{
//console.log（response.data，this）
this.posts=response.data
此参数为0。加载=错误
})
}
})
*/

加载。。。


{{post.title}

{{post.body}

我将使用AWolf的解决方案，但是在loadData方法中稍微改进了错误处理

函数getUrlParams（）{
var url_params=新的URLSearchParams（）；
if（window.location.toString（）.indexOf（“？”）=-1）{
var href_part=window.location.search.split（“？”）[1]
href_part.replace（/（[^=&]+）=（[^&]*）/g，
功能（m、键、值）{
var attr=decodeURIComponent（键）
var val=解码组件（值）
url_params.append（attr，val）；
});
}
//对于（url_params.entries（）的变量对）{consolas.log（对[0]+'->'+对[1]）}而言
返回url_参数；
}
函数getServerData（url、urlParams）{
如果（url的类型参数==“未定义”）{
urlParams=getUrlParams（）
}
返回axios.get（url{
参数：urlParams
})
。然后（响应=>{
返回响应；
})
.catch（函数（错误）{
控制台错误（错误）
返回error.response；
})
}
//行动！！！
getServerData（url、url\u参数）
。然后（响应=>{
如果（response.status==204）{
var warningMsg=response.statusText
控制台。警告（警告消息）
返回
}else if（response.status==404 | | response.status==400）{
var errorMsg=response.statusText//+“：“+response.data.msg//这是我的api
控制台错误（errorMsg）
返回；
}否则{
var data=response.data
变量数据类型=（数据类型）
如果（数据类型===‘未定义’）{
var msg='获取数据时发生意外错误！！！'
//在此将消息传递给ui更改方法
//showmymmsg（msg，“错误”）
}否则{
var items=data.dat//obs这是我的api，也称为“dat”属性——这就是从中获取数据的json键
//在这里调用ui构建方法
//构建列表（项目）
}
返回
}
})

在深入研究vuex和州管理之前，我建议您对承诺有一个坚实的理解。它们现在只返回一个与常规JavaScript函数相同的值。并给出一些很好的例子。调用

this.$store.dispatch（'loadData'）

的组件如何知道数据已经加载？我们可以使用

changeLoadingState

进行检查，但是如果有许多加载发生呢？如果我理解正确，您可以检查

加载

状态，如果您想执行多个请求，您可以使用这些请求等待所有请求得到解决，然后调用

提交（'changeLoadingState'，false）

将加载状态更改为false

this.$store.dispatch

仅在创建Vue实例时调用一次。