vuex异步获取数据_如何在使用Vuex的情况下请求数据

1.在生命周期 函数里 写axios请求(需要先安装axios)

因为获取数据是一个异步的请求，我们等到页面加载完成 再进行请求的话，难免会有一个加载延时的效果。

//引入axios

import axios from "axios"

// 在生命周期：created写请求

created:{

axios.get("https://cnodejs.org/api/v1/topics", {

params:{

page : 2,

limit : 40

}

}.then(res => {

console.log(res);

// 修改指向问题

let _this = this;

//res.data数据

_this.$store.commit("Topics", res.data);

console.log(res);

})

}

2.在Store(Vuex) 里接收传过来的参数。

state是存放数据的地方，我需要创建一个数组来 接收传递过来的数据

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

arr: [],

},

// mutations是唯一一个可以直接改变数据的函数

mutations: {

Topics(state, payload) {

state.arr.push(...payload);

console.log(state.arr);

}

},

actions: {

},

modules: {

}

})

3.通过 mapState 的方式获取 Vuex里面的数据

获取Vuex属性的地方在 computed, 而获取 方法的地方在methods上

//要先在export default 前面引入vuex

import { mapState } from "vuex";

//在computed 接收Vuex的数据

computed:{

...mapState(["arr"]);

}

后面使用、 渲染数据就可以了