Vue2+Vue3前端开发_Day7type
status
date
slug
summary
tags
category
icon
password
参考课程:
【黑马程序员 Vue2+Vue3基础入门到实战项目】
@ZZHow(ZZHow1024)
VueCli自定义
- 目标：基于 VueCli 自定义创建项目架子。
- 步骤：
- 安装脚手架
- 创建项目
- 选择自定义
- Babel / Router / CSS / Linter
- Vue2.x
- VueRouter hash 模式
- CSS 预处理 less
- ESlint: Standard & Lint on Save
- 配置文件 dedicated config files
ESlint代码规范
- 目标：认识代码规范。
- 代码规范：一套写代码的约定规则。
- JavaScript Standard Style 规范说明：
- 规则中的一小部分：
- 字符串使用单引号：
'abc' - 无分号：
const name = 'zs' - 关键字后加空格：
if (name = 's') {…} - 函数名后加空格：
function name (arg) {…} - 坚持使用全等 === 摒弃 ==。
- 当代码不符合 standard 的要求时，ESlint 会报错。
- 报错内容：
- 行数:字符数
- 相关规范
- 两种解决方案：
- 手动修正
- 根据错误提示来一项一项手动修改纠正。
- 可以根据错误代码去 ESLint 规则表中查找其具体含义。
- 自动修正
- 安装 VS Code 插件：ESLint
- 在 settings.json 中添加配置项：
Vuex入门
- 介绍：Vuex 是一个 Vue 的状态管理工具，状态就是数据。（Vuex 是一个插件，可以用来管理 Vue 通用的数据（多组件共享的数据）。
- 场景：
- 某个状态在很多个组件来使用（个人信息）。
- 多个组件共同维护一份数据（购物车）。
- 优势：
- 共同维护一份数据，数据集中化管理。
- 响应式变化。
- 操作简洁（Vuex 提供了一些辅助函数）。
- 创建一个空仓库
- 目标：安装 Vuex 插件，初始化一个空仓库。
- 步骤：
yarn add vuex@3- 新建 store/index.js 专门存放 Vuex。
Vue.use(Vuex)- 在 main.js 中导入挂载到 Vue 实例上。
- 在 App.vue 中检验：打印 this.$store，不是 undefined 证明创建成功。
创建仓库
new Vuex.Store()- 核心概念
- state 状态
- state 状态就是数据，类似 Vue 组件中的 data。
- 提供数据：
- State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 中的 State 中存储。
- 在 state 对象中可以添加要共享的数据。
- 使用数据：
- 通过 store 直接访问。
- 模版中：{{ $store.state.xxx }}
- 组件逻辑中：this.$store.state.xxx
- JavaScript 模块中：store.state.xxx
- 通过辅助函数（简化）。
- mapstate 是辅助函数，可以把 store 中的数据自动映射到组件的计算属性中。
- 步骤：
- 导入 mapState：
import { mapState } from 'vuex' - 数组方式引入 state：
mapState(['count']) - 展开运算符映射：
- mutations
- Vuex 遵循单向数据流，组件中不能直接修改仓库的数据。
- 通过添加 strict: true 开启严格模式，当不遵循规范时会报错。
- 步骤：
- 定义 mutations 对象，对象中存放修改 state 的方法。
- 组件中提交调用 mutations。
- 辅助函数 - mapMutations
- mapMutations 和 mapState 很像，它是把位于 mutations 中的方法提取了出来，映射到组件 methods 中。
- 使用：
- 调用：
this.subCount(10) - actions
- actions 用于处理异步操作。
- 步骤：
- 提供 action 方法
- 页面中 dispatch 调用
- 辅助函数 - mapActions
- mapActions 是把位于 actions 中的方法提取了出来，映射到组件 methods 中。
- 使用：
- 调用：
this.changeCountAction (666) - getters
- getters 类似于计算属性。
- 说明：除了 state 之外，有时我们还需要从 state 中派生出一些状态，这些状态是依赖 state 的，此时会用到 getters。
- 步骤：
- 定义 getters
- 访问 getters
- 通过 store 访问 getters
- 通过辅助函数 mapGetters 映射
- 调用：
{{ filterList }}
Vuex模块（进阶语法）
- 由于 Vuex 使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿（当项目变得越来越大的时候，Vuex 会变得越来越难以维护）。
- 模块拆分（以 user 模块为例）：
- 新建模块 store/module/user.js
- 在 store/index.js 中导入并注册成为子模块
- 尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的 state 中，属性名就是模块名。
- 在导出时开启命名空间：
- 使用模块中的数据：
- 通过模块名访问：
$store.state.模块名.xxx - 通过 mapState 映射
- 默认根级别的映射：
mapState (['xxx']) - 子模块的映射：
mapState ("模块名", ['xxx'])- 需要开启命名空间
- 使用模块中的 getters 中的数据：
- 通过模块名访问：
$store.getters['模块名/xxx'] - 通过 mapGetters 映射
- 默认根级别的映射：
mapGetters(['xxx']) - 子模块的映射：
mapGetters('模块名', ['xxx'])- 需要开启命名空间
- 调用子模块中的 mutation：
- 直接通过 store 调用
$store.commit('模块名/xxx', 额外参数) - 通过 mapMutations 映射
- 默认根级别的映射
mapMutations(['xxx']) - 子模块的映射
mapMutations('模块名', ['xxx'])- 需要开启命名空间
- 调用子模块中的 action：
- 直接通过 store 调用
$store.dispatch('模块名/xxx', 额外参数) - 通过 mapActions 映射
- 默认根级别的映射
mapActions(['xxx']) - 子模块的映射
mapActions(’模块名', ['xxx'])- 需要开启命名空间
综合案例-购物车
- 功能模块分析
- 请求动态渲染购物车，数据存 Vuex。
- 数字框控件修改数据。
- 动态计算总价和总数量。
- 脚手架新建项目（勾选 Vuex）
vue create vue-cart-demo
- 构建 cart 购物车模块
- 新建 'store/modules/cart.js'。
- 挂载到 Vuex 仓库上 'store/index.js'。
- 基于 json-server 工具准备后端接口服务环境
- 官网：
- 步骤：
- 安装全局工具 json-server（全局工具仅需要安装一次）
yarn global add json-server或npm install json-server -g - 代码根目录新建一个 db 目录
- 将资料 index.json 移入 db 目录
- 进入 db 目录，执行命令，启动后端接口服务
json-server index.json - 访问接口测试 http://localhost:3000/cart
- 请求获取数据，存入 Vuex，映射渲染
- 安装 axios
- 准备 actions 和 mutations
- 调用 action 获取数据
- 动态渲染
- 修改数量功能
- 点击事件
- 页面中 dispatch
- 提供 action 函数
- 提供 mutation 函数
- 底部 getters 统计
- 提供 getters
- 使用 getters
- 案例演示：vue-cart-demo