目录
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
即可在组件内使用,例如