js部分, app.vue

//本來我們請求三級分類列表的功能是在TypeNav裡面去做的，TypeNav元件又在 /home 路徑下，載入TypeNav後，自動會發送ajax請求，

//對axios的二次封裝
// 配置基礎路徑和超時限制
// 新增進度條資訊  nprogress
// 返回的響應不再需要從data屬性當中拿資料，而是響應就是我們要的資料
// 統一處理請求錯誤, 具體請求也可以選擇處理或不處理
import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


const service = axios.create({
  baseURL: '/api',  // 配置基礎路徑
  timeout: 20000,  //和超時限制
});


//請求攔截器
//請求攔截器內部一般不會處理錯誤的資訊
service.interceptors.request.use(config => {
  //config是傳送請求的配置物件，必須處理完返回這個配置物件
  //開啟我們的進度條
  NProgress.start()
  return config
});
// 響應攔截器
service.interceptors.response.use(
  response => {
    //停止進度條
    NProgress.done()
    //返回響應的時候，直接返回響應的data
    return response.data
  },
  error => {

    NProgress.done()

    alert('請求出錯' + error.message || '未知錯誤')
    //以後不允許使用者繼續處理： 中斷promise鏈
    return new Promise(() => {}) //返回pending狀態的promise 中斷
    //以後它允許使用者繼續對錯誤進行處理
    // return Promise.reject(error)
  }
);


export default service
 

2.介面請求函式檔案 index.js

//這個檔案是專案的介面請求函式檔案
//給每個介面發請求，我們都把它封裝成一個函式，到時需要請求拿資料的時候，就去呼叫對應的介面函式就完了
import Ajax from '@/ajax/Ajax'
// 請求獲取三級分類列表資料
// get   /api/product/getBaseCategoryList   引數：無

export const reqCategoryList = () => Ajax({
  url:'/product/getBaseCategoryList',
  method:'GET'
})

3.vuex,傳送ajax請求部分 home.js

import {reqCategoryList} from '@/api'

const state = {
  categoryList : []
}
const mutations = {
  //直接修改資料
  RECEIVECATEGORYLIST(state,categoryList){
    state.categoryList = categoryList
  }
}

const actions = {
  //非同步請求資料
  //async 和 await的用法
  async getCategoryList({commit}){
    const result = await reqCategoryList()
    if(result.code === 200){
      commit('RECEIVECATEGORYLIST',result.data)
    }
  }
  
}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}
 

4.TypeNav元件獲取響應資料部分 typeNav.vue

import { mapState } from "vuex";

 computed: {
    // categoryList(){
    //   return this.$store.state.categoryList
    // }

    // ...mapState(['categoryList'])

    //上面兩種寫法是一回事，mapState對映的時候預設對映的就是總的store的state內部的資料
    //如果使用了vuex模組化開發，那麼陣列的形式就無法使用了

    // 普通寫法
    // categoryList(){
    //   return this.$store.state.home.categoryList
    // }
    
    ...mapState({
      categoryList: state => state.home.categoryList
    })
  }