Vue2项目笔记day_02

this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})

function push(){ return new Promise((resolve,reject)=>{ }) }

// 三级联动组件--全局组件
import TypeNav from '@/pages/Home/TypeNav'
// 参数：第一个：全局组件的名字；第二个：哪一个组件
Vue.component(TypeNav.name,TypeNav);

// 对axios进行二次封装


// 引入axios
import axios from "axios";


// 1、利用axios对象的方法create，创建一个axios实例
// 2、request就是axios,只不过可以稍微配置一下
const requests=axios.create({
    // 配置对象
    // 基础路径，当发请求时，路径中会自动出现/api,不用自己手动写
    baseURL:'/api',
    // 超时设置5s
    timeout:5000,


});
// 请求拦截器：在发请求前处理一些业务
requests.interceptors.request.use((config)=>{
    // config:配置对象，里面 headers请求头 属性很重要
    return config;
})


// 响应拦截器：在服务器数据返回后处理一些业务
requests.interceptors.response.use((res)=>{
    // 成功的回调
    return res.data;
},(error)=>{
    // 失败的回调
    // 终结promise链
    return Promise.reject(new Error('faile'))
})


// 对外暴露
export default requests;

// 统一管理API接口


// 引入封装后的axios,即requests
import requests from './request'


// 三级联动的接口
// 请求地址：/api/product/getBaseCategoryList  GET请求，无参数


// 对外暴露函数,让别的模块拿到这个函数就可以发请求了
// 发请求,axios发送请求返回的结果是promise对象
// 简写  分别暴露引入要用{}
export const reqCatagoryList=()=> requests({url:'/product/getBaseCategoryList',method:'get'})

// 请求拦截器:进度条开始动
    nprogress.start();
// 响应拦截器:进度条结束
    nprogress.done()

import Vue from 'vue';
import Vuex from 'vuex';


// 使用Vuex
Vue.use(Vuex)


const state={};
const mutations={};
const actions={};
const getters={};


// 对外暴露Store类的一个实例
// Vuex其实是一个对象，对象身上有Store方法，这个方法是个构造函数，可以初始化Vue仓库
export default new Vuex.Store({
    // 配置对象
    state,
    mutations,
    actions,
    getters,


});

// 引入Vuex的仓库
store import store from '@/store'

// 注册Vuex仓库,此时，组件实例对象身上会多一个$store属性 
store,

// home模块的小仓库


// 引入reqCatagoryList的api接口函数
import {reqCatagoryList} from '@/api';
// 仓库存储数据的地方
const state={
    // 起始值【起始值不能乱写，要看服务器返回的数据是什么类型】
    categoryList:[],
};
// 修改state的唯一手段
const mutations={
    CATEGORYLIST(state,categoryList){
        state.categoryList=categoryList;
    }
};
// 处理action，可以书写自己的业务逻辑，也可以处理异步
const actions={
    // 这里可以书写业务逻辑，但是不能修改state
    // 通过API里面的接口函数调用，向服务器发送请求，获取数据
    async categoryList({commit}){
        // 调用api接口函数，返回的是promise对象，利用async和await，获取成功的结果
        let result= await reqCatagoryList();
        if(result.code==200){
            commit("CATEGORYLIST",result.data)
        }
    }


};
// 理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters={};


// 对外暴露
export default {
    state,
    mutations,
    actions,
    getters,
}