day03-尚品汇-2022年4月6日21:44:21-（p11-p19) 完美解决data返回数组为空的问题_搜索出来的date是空数组

！！！重要

p19 07:04时，commit一定要加“{}”，不然会无法访问数据或者返回值为空，切记切记。我就花了半小时找bug。

    async categoryList({commit}){
        let result = await reqCategoryList();
        console.log(result);
        if (result.code === 200) {
            commit("CATEGORYLIST",result.data);
        }
    }
1
2
3
4
5
6
7

因后台数据修改，多了一条数据，故可以在TypeNav下index.vue中修改如下：

<div class="item" v-for="(c1, index) in categoryList.slice(0, 16)" :key="c1.categoryId">
1

Home模块组件拆分

–先把静态页面完成

–拆分出静态组件

–获取服务器的数据进行展示

–动态业务

配置路由

配置路由：
------路由组件
-----router—>index.js

import Vue  from 'vue';
import VueRouter from 'vue-router';
//使用插件
Vue.use(VueRouter);
//对外暴露VueRouter类的实例
export default new VueRouter({
     routes:[
          {
               path:'/home',
               component:Home
          }
     ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13

-----main.js 配置项不能瞎写

vuex

当项目比较大，组件通信数据比较复杂，这种情况在使用vuex

Vuex是插件，通过vuex仓库进行存储项目的数据

因为使用的vue2开发项目，所以也要限制一下版本

cnpm install --save vuex@3
1

vuex模块式开发【modules】

Vuex核心概念:state、actions、mutations、getters、modules

//模块式开发
{
    state:{
        home:{a:1},
        search:{},
        detail:{}
    }
}
1
2
3
4
5
6
7
8