Vuex异步获取数据的步骤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import axios from "axios";
// 引入进度条
import nprogress from "nprogress";
// 引入进度条样式
import 'nprogress/nprogress.css'
// console.log(nprogress);
const requests = axios.create({
baseURL:'/api',
timeout:5000
});
// 添加请求拦截器
requests.interceptors.request.use((config)=>{
nprogress.start()
return config;
});
// 添加响应拦截器
requests.interceptors.response.use( (response) =>{
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
nprogress.done();
return response.data;
}, (error)=> {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
})
export default requests;

1
2
3
4
5
import requests from "./ajax";
// 请求地址：/api/product/getBaseCategoryList
请求方式：GET
export const reqCategoryList = ()=> requests.get('/product/getBaseCategoryList')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 引入接口函数
import {reqCategoryList} from '@/api'
// 存储数据
const state = {
// state里面的初始值不能瞎写，服务器返回的是什么，起始值是什么
categoryList: [],
}
// 异步操作数据，将数据commit到mutations中
const actions = {
// 通过API里面的接口函数调用，向服务器发请求，获取服务器的数据
async categoryList({commit}) {
let result = await reqCategoryList();
if (result.code == 200) {
commit('CATEGORYLIST', result.data)//在这里提交的名字一般大写
}
},
}
// 处理数据
const mutations = {
CATEGORYLIST(state, categoryList) {
state.categoryList = categoryList
},
}
// 计算属性
const getters = {}
export default ({
state,
actions,
mutations,
getters,
})

1
2
3
4
5
mounted(){
this.$store.dispatch("categoryList");
// console.log(this);VueComponent
}

1
2
3
4
5
6
7
import { mapState } from "vuex";
computed: {
...mapState({
categoryList: (state) => state.home.categoryList,
})
}

1
2
<div class="item bo" v-for="(c1, index) in categoryList" :key="c1.categoryId"></div>