Vue 使用 Vuex 和 axios 获取接口数据
Posted sakura666
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 使用 Vuex 和 axios 获取接口数据相关的知识,希望对你有一定的参考价值。
- 修改原型链
//main.js
import axios from 'axios';
Vue.prototype.$ajax = axios; //修改原型链
// .vue文件
methods:
getData()
this.$ajax.get('https://easy-mock.com/mock/5d41481656e5d340d0338e4b/shop/commodity')
.then(res =>
console.log(res)
).catch(err =>
console.log(err)
)
2.Vuex 结合 axios 封装一个 actions
//store.js
import Vue from 'vue';
import Vuex from 'Vuex';
import axios from 'axios';
export const store = new Vuex.Store(
State:
list: []
,
mutations:
changeList(state,res) // store中的数据只能通过commit mutation来改变
state.list = res.data.data.list
,
actions:
getInfo(context)
axios.get('https://easy-mock.com/mock/5d41481656e5d340d0338e4b/shop/commodity')
.then(res =>
context.commit('changeList',res)
).catch(err =>
console.log(err)
)
)
// .vue文件
import mapState,mapActions from 'vuex'
export default
name:"HelloWorld",
methods:
...mapActions([
'getInfo' // 触发actions里的 getInfo 函数,调动接口
])
,
computed:
...mapState([
'list' // 获取store里的数据,放在computed中可以实时更新
])
,
mounted()
this.getInfo()
上述两种方案是相互独立的,也就是说,即使在main.js中引入了axios并修改了原型链,
在store.js中也不能直接使用this.$ajax,而是要引入axios后再使用。
以上是关于Vue 使用 Vuex 和 axios 获取接口数据的主要内容,如果未能解决你的问题,请参考以下文章