Vue 使用 Vuex 和 axios 获取接口数据

Posted sakura666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 使用 Vuex 和 axios 获取接口数据相关的知识,希望对你有一定的参考价值。

  1. 修改原型链
//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 获取接口数据的主要内容,如果未能解决你的问题,请参考以下文章

Vue之vuex和axios

Vue(二十三)vuex + axios + 缓存 运用 (以登陆功能为例)

vue axios怎么获取到状态

无法在 Axios 拦截器中获取 Vuex 存储

成功调用 axios 后,Vue.js 组件不会发送到父级

使用axios+vuex来调接口使数据随处可用