Vue 项目的记录（六）

Search模块开发

流程：
1:先静态页面+静态组件拆分出来
2:发请求(API)
3:vuex(三连环)
4:组件获取仓库数据，动态展示数据

1. Search 静态组件

2. search中的vuex操作

1. 定义好接口，从文档里来看，需要传参数
   
2. 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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

3. search中动态展示产品列表

Search模块根据不同的参数获取数据展示，
Object.assign() 方法 参考

4. search模块中根据不同的参数获取数据展示

5. 监听路由的变化在一次发送请求