[JavaScript知识库]Vuex异步获取数据的步骤

1、在api文件夹，新建个ajax.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个），这个文件用于向服务器发请求

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;

2、在api文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个），这个文件对api接口进行统一的管理，index.js文件主要用于数写请求接口，并对外暴露

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

3、在store文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个），采用模块化的

// 引入接口函数
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,
})

4、在相应的组件挂载完毕后向服务器发起请求，此时vuex中已经存入页面的数据

mounted(){
    this.$store.dispatch("categoryList");
    // console.log(this);VueComponent
  }

5、在相应的组件中，将数据从vuex中提取出来使用

import { mapState } from "vuex";
    computed: {
        ...mapState({
              categoryList: (state) => state.home.categoryList,
        })
   	}

6、此时数据都在categoryList中，使用即可，如：

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

注：在写完每一步后都要看看数据到底拿到了没有，如果一直写最后出错了不好寻找错误