Search模块开发
流程:
1:先静态页面+静态组件拆分出来
2:发请求(API)
3:vuex(三连环)
4:组件获取仓库数据,动态展示数据
1. Search 静态组件
2. search中的vuex操作
- 定义好接口,从文档里来看,需要传参数
- vuex三连环
seach仓库中的index.js
// search 模块的小仓库
import { reqGetSearchInfo } from "@/api"
const actions = {
// 获取search模块数据
async getSearchList(context, params = {}) {
//当前这个reqGetSearchInfo这个函数在调用获取服务器数据的时候,至少传递一个参数(空对象)
//params形参:是当用户派发action的时候, 第二个参数传递过来的,至少是一个空对象
let result = await reqGetSearchInfo(params)
if (result.code == 200) {
context.commit('GETSEARCHLIST', result.data);
}
}
}
const mutations = {
GETSEARCHLIST(state, searchList) {
state.searchList = searchList
}
}
const state = {
// 仓库初始状态
searchList: {}
}
//计算属性
//项月当中getters主要的作用是:简化仓库中的数据(简化数据而生)
//可以把我们将来在组件当中需要用的数据简化一下 ==> 将来组件在获取数据的时候就方便了
const getters = {
// state是当前仓库的state
goodsList(state) {
//state . searchList . goodsList如果服务器数据回来了,没问题是一个数组
//假如网络不给力没有网state . searchList . goodsList应该返回的是undefined
//计算新的属性的属性值至少给人家来个数组
return state.searchList.goodsList || []
},
attrsList(state) {
return state.searchList.attrsList || []
},
trademarkList(state) {
return state.searchList.trademarkList || []
}
}
export default {
actions,
mutations,
state,
getters
}
3. search中动态展示产品列表
Search模块根据不同的参数获取数据展示,
Object.assign() 方法 参考
4. search模块中根据不同的参数获取数据展示
5. 监听路由的变化在一次发送请求