Vue 前台项目（电商）8
vuex 模块式开发
vuex 是官方提供的一个插件，状态管理库，集中式管理项目中组件共用的数据。
如果项目很小，完全不需要 vuex
如果项目很大，组件很多、数据很多、数据维护很费劲，就用 vuex
安装 vuex
npm install --save vuex
vuex的基本使用
在 src 文件夹下创建 store 文件夹，并在里面创建 home 文件夹、search 文件夹和相应的 index.js 文件
home/index.js
//home 模块的小仓库
//state：仓库存储数据的地方
const state = {};
//mutations：修改state的唯一手段
const mutations = {};
//actions：处理action，可以书写自己的业务逻辑，也可以处理异步
const actions = {};
//getters：理解为计算属性，用于简化仓库数据，让组件获取仓库数据更加方便
const getters = {};
export default{
state,
mutations,
actions,
getters
}
search/index.js
//search 模块的小仓库
const state = {}
const mutations = {}
const actions = {}
const getter = {}
export default{
state,
mutations,
actions,
getter
}
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
//需要使用插件一次
Vue.use(Vuex);
//引入小仓库
import home from './home'
import search from './search'
//对外暴露 Store 类的一个实例
export default new Vuex.Store({
//实现Vuex仓库模块式开发存储数据
modules:{
home,
search
}
})
打开 main.js 把 store仓库 引入
为了规范写法，我们将 pages > Home >TypeNav 文件夹移动到 conponents 文件夹里
ps：全局组件放在 components 文件夹里
同时将 main.js 里引入 TypeNav 的路径改为
import TypeNav from '@/components/TypeNav'
实现 三级联动组件 TypeNav 动态渲染数据
将 请求到的数据放到 store > home 模块的小仓库中
TypeNav / index.vue
home / index.js
//home 模块的小仓库
import { reqCategoryList } from "@/api";
//state：仓库存储数据的地方
const state = {
//根据接口返回值初始化，返回的是对象,就是{} 返回的是数组,就是[]
categoryList:[]
};
//mutations：修改state的唯一手段
const mutations = {
CATEGORYLIST(state,categoryList){
state.categoryList = categoryList
}
};
//actions：处理action，可以书写自己的业务逻辑，也可以处理异步
const actions = {
//通过API里面的接口函数调用，向服务器发送请求，获取服务器的数据
async categoryList({commit}){
let result = await reqCategoryList()
if(result.code==200){
commit("CATEGORYLIST",result.data)
}
}
};
//getters：理解为计算属性，用于简化仓库数据，让组件获取仓库数据更加方便
const getters = {};
export default{
state,
mutations,
actions,
getters
}
数据拿到之后就可以渲染页面了
TypeNav / index.vue
引入防抖与节流
防抖：就是规定在一段时间内，事件只执行一次，如果在规定的时间里面，再次触发该事件，那么将会重新计时
例子：老师告诉学生们，如果在一个星期内不会上课睡觉，就奖励一颗棒棒糖，如果在这段时间内，有人违规了，那么就从这一刻开始重新计时，过一个星期就可以领到棒棒糖了
节流：规定在一段时间内执行一次
例子：老师告诉学生们，一周内在课堂上只允许放一次影片观看，如果在这一周内观看了一次影片，那么接下来学生观看电影的请求，老师都不会答应的
一级，二级，三级分类的跳转
我们采用编程式导航 + 事件委托 来进行路由跳转
存在的一些问题：事件委托，是把全部的子节点【h3,dt,dl,em】的事件委托给父亲节点
点击 a 标签的时候，才会进行路由跳转【怎么确定点击的一定是a标签】
存在另一个问题：即使你能确定点击的是a标签，如何区分是一级、二级、三级分类的标签
我们的解决方式如下图：
开发Search模块中的TypeNav商品分类菜单（过渡动画效果）
在Home路由页面 商品分类是默认打开的
在Search路由页面 商品分类是默认关闭的
实现，如下图：
在Search页面时，鼠标移入商品分类，展开，移出时，则关闭 且不影响Home页面
实现，如下图：
添加过渡动画
实现，如下图:
TypeNav商品分类列表的优化
因为 Home 组件和 Search 组件都用到 TypeNav 组件了
所以会导致重复的向服务器发送两次请求
优化方式：在根组件发送请求
TypeNav
这行代码剪切到根组件（App.vue）
