vuex、接口模块式开发

目录

vuex模块式开发的好处：

         方法：

接口模块式开发的好处：

         方法：

---

vuex模块式开发的好处：

模块化开发就是将程序划分为不同的相互独立的模块单元，然后将这些模块进行整合，这样每个模块皆既可以单独使用，也可以进行组合使用，彼此之间互不影响,

        可以有效清晰的管理数据，每个组件对应着自己的数据‘仓库’

         方法：

        1.利用配置项modules

                        index.js如下：

// 引入vue
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 引入小仓库
import home from './home'
import search from './search'
import detail from './detail'
import shopcart from './shopcart'
import user from './user'
import trade from './trade'
// 对外暴露store类的一个实例
export default new Vuex.Store({
    // 实现vuex仓库模块式开发存储数据
    modules:{
        home,
        search,
        detail,
        shopcart,
        user,
        trade
    }
})

        2.以home为例：

import {reqCategoryList,reqGetBannerList,reqFloorList} from '@/api'
// home模块的小仓库
const state={}
const mutations={}
//action处理action,可以书写自己的业务逻辑，也可以处理异步 
const  actions={}
 
const getters={}
 
//对外暴露
export default {
    state,
    mutations,
    actions,
    getters
 
}

---

---

---

接口模块式开发的好处：

        可以有效清晰的管理接口，便于寻找代码，每个组件对应着自己将要发请求的接口

        方法：

        1.  以attr.js为例：

//引入二次封装的axios
import request from '@/utils/request' 
 
// 获取一级分类数据的接口/admin/product/get/category1 get
export const reqCategory1List=()=>request({
    url:`/admin/product/getCategory1`,
    method:"get"
})

       2.  index.js如下：

// 将四个接口函数统一暴露
import * as attr from './product/attr'
import * as sku from './product/sku'
import * as spu from './product/spu'
import * as trademark from './product/tradeMark'
 
export default{
    trademark,
    spu,
    sku,
    attr
}

        3.  main.js如下：

// 引入相关API请求接口
import API from '@/api'
Vue.prototype.$API=API 

即可在组件内使用，例如