Day7：
1.自定义创建项目
1.目标:基于 Vuecli 自定义创建项目架子
2.步骤：
1.安装脚手架 (V)
2.创建项目
3.选择自定义
1.Babel/Router/css/Linter
2.Vue2.x
3.VueRouter hash模式
4.CSS预处理 Less
5.ESlint: Standard & Lint on Save
6.配置文件 dedicated config files
2.ESlint 代码规范
1.ESlint 代码规范
1.目标:认识代码规范
2.代码规范:一套写代码的约定规则。例如:"赋值符号的左右是否需要空格"。"一句结束是否是要加 ; "…
3.老话说:"没有规矩不成方圆" → 正规的团队需要 统一 的编码风格
4.JavaScript Standard Style 规范说明 https://standardis.com/rules-zhcn.html
5.下面是这份规则中的一小部分:
1.字符串使用单引号 'abc'
2.无分号 const name ='zs'
3.关键字后加空格 if(name ='ls'){...}
4.函数名后加空格 function name(arg){...}
5.坚持使用全等 === 摒弃 ==
2.代码规范错误
1.目标:学会解决代码规范错误
2.两种解决方案:
1.手动修正
根据错误提示来一项一项手动修改纠正
如果你不认识命令行中的语法报错是什么意思，根据错误代码去[ESLint 规则表]中查找其具体含义。
2.自动修正
基于 vscode 插件 ESLint 高亮错误，并通过配置 自动 帮助我们修复错误。
在cscode里下载ESlint 打开设置 打开设置文件 加入以下代码：
//当保存的时候，eslint自动帮我们修复错误'
"editor.codeActionsOnSave":{
"source.fixA1l": true
},
//保存代码，不自动格式化
"editor.formatOnSave": false
3.vuex
1.vuex概述
1.目标:明确 vuex是什么，应用场景，优势
2.是什么:
1.vuex是一个 vue 的 状态管理工具，状态就是数据。
2.大白话:vuex 是一个插件，可以帮我们管理 vue 通用的数据(多组件共享的数据) 例如:购物车数据 个人信息数据
3.场景:
1.某个状态 在 很多个组件 来使用(个人信息)
2.多个组件 共同维护 一份数据(购物车)
4.优势:
1.共同维护一份数据,数据集中化管理
2.响应式变化
3.操作简洁(vuex提供了一些辅助函数)
2.构建 vuex[多组件数据共享]环境
1.目标:基于脚手架创建项目，构建 vuex 多组件数据共享环境
2.效果是三个组件，共享一份数据:
1.任意一个组件都可以修改数据
2.三个组件的数据是同步的
3.创建一个空仓库
1.目标:安装 vuex插件，初始化一个空仓库
1. 安装 vuex：yarn add vuex@3
2.新建vuex模块文件：新建 store/index.js 专门存放 vuex
3.创建仓库：Vue.use(Vuex) 创建仓库 new Vuex.Store()
4.main.is导入挂载：在 main.js 中导入挂载到 Vue 实例上
5.检验:this.$store
3.核心概念-state 状态
1.目标:明确如何给仓库 提供 数据，如何 使用 仓库的数据
2.提供数据:
1.State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 中的 State 中存储
2.在 state 对象中可以添加我们要共享的数据
//创建仓库
const store = new,Vuex.store({
//state 状态，即数据，类似于vue组件中的data
//区别:
//1.data 是组件自己的数据
//2.state 是所有组件共享的数据
state:{
count: 101
}
})
3.使用数据:
1.通过 store 直接访问
获取 store:
1.this.$store
2.import 导入 store
模板中:{{ $store.state.xxx }}
组件逻辑中:this.$store.state.xxX
JS模块中:store.state.xxx
2.通过辅助函数
mapState是辅助函数，帮助我们把 store中的数据 自动 映射到 组件的计算属性中
1.导入mapState:import {mapState}from 'vuex'
2.数组方式引入state:mapState(['count'])
3.展开运算符映射:computed:{
...mapState(['count'])
}
4.核心概念-mutations
1.目标:明确 vuex同样遵循单向数据流，组件中不能直接修改仓库的数据
1.this.$store.state.count++(错误写法)
2..通过 strict:true 可以开启严格模式
2.目标:掌握 mutations 的操作流程，来修改 state 数据，(state数据的修改只能通过 mutations)
1.定义 mutations 对象，对象中存放修改 state 的方法
const store= new Vuex.store({
state:{
count:0
},
//定义mutations
mutations :{
//第一个参数是当前store的state属性
addcount(state){
state.count += 1
}
}
})
2.组件中提交调用 mutations
this.$store.commit('addcount')
3.目标:掌握 mutations 传参语法
提交 mutation 是可以传递参数的`this.$store.commit('xxx'，参数)`
1.提供 mutation 函数(带参数-提交载荷 payload)
mutations:{
...
addcount(state，n){
state.count += n
}
},
2.页面中提交调用 mutation
this.$store.commit('addcount', 10)
3.Tips:提交参数只能一个，如果有多个参数，包装成一个对象传递
this.$store.commit('addcount',{
count:10,
...
})
4.练习
1.目标:实时输入，实时更新，巩固 mutations 传参语法
1.输入框内容渲染: :value
2.监听输入获取内容: @input
3.封装mutation处理函数: mutation传参
4.调用传参: commit调用
5.辅助函数:mapMutations
1.目标:掌握辅助函数 mapMutations，映射方法
2.mapMutations 和 mapState很像，它是把位于mutations中的方法提取了出来，映射到组件methods中
1.mutations:{
subcount(state,n){
state.count -= n
}
},
2.import{mapMutations} from 'vuex'
methods:{
...mapMutations(['subcount'])
}
等价于做了下面代码的事
methods:{
subcount(n){
this.$store.commit('subcount', n)
}
},
3.this.subcount(10)调用
6.核心概念-actions
1.目标:明确 actions 的基本语法，处理异步操作。
2.需求: 一秒钟之后,修改 state 的 count 成 666。
3.说明:mutations 必须是同步的(便于监测数据变化，记录调试)
1.提供action 方法
actions:{
setAsyncCount(context,num){
//一秒后,给一个数去修改 num
setTimeout(() => {
context.commit('changecount',num)
},1000)
}
}
2.页面中 dispatch 调用
this.$store.dispatch('setAsynccount',200)
7.辅助函数-mapActions
1.目标:掌握辅助函数 mapActions，映射方法
2.mapActions 是把位于 actions中的方法提取了出来，映射到组件methods中
1.actions:{
changecountAction(context，num){
setTimeout(()=>{
context.commit('changecount',num)
},1000)
}
}
2.import {mapActions }from 'vuex
methods:{
...mapActions(['changecountAction')
}
等价于
methods:{
changecountAction(n){
this.$store.dispatch('changeCountAction',n)
},
}
3.this.changeCountAction(666)调用
8.核心概念-getters
1.目标:掌握核心概念 getters 的基本语法(类似于计算属性)
2.说明:除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters
3.例如:state中定义了list，为1-10的数组，组件中，需要显示所有大于5的数据
state:{
list:[1，2，3，4，5，6，7，8，9，10]
}
1.定义 getters
getters:
// 注意:
//(1)getters函数的第一个参数是 state
//(2)getters函数必须要有返回值
filterList(state){
return state.list.filter(item=> item > 5)
}
}
2.访问getters
1.通过 store 访问 getters
{{ $store.getters.filterList }}
2.通过辅助函数 mapGetters 映射
computed:{
...mapGetters(['filterList'])
},
{{ filterList }}
9.核心概念-模块 module(进阶语法)
1.目标:掌握核心概念 module 模块的创建
2.由于 vuex 使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。(当项目变得越来越大的时候，Vuex会变得越来越难以维护)
3.例如：
state:{
userInfo:{
name:'zs',
age:18
},
theme:'dark',
desc:'测试项目'
},
模块拆分:ser模块:store/modules/user.js
1.const state = {
userInfo: {
name: 'zs',
age: 18
}
}
const mutations = {}
const actions = {}
const getters = {}
export default {
state,
mutations,
actions,
getters
}
2.import user from'./modules/user'
const store = new Vuex.store({
modules:{
user
}
})
10.核心概念-模块 module(进阶语法)
1.目标:掌握模块中 state 的访问语法
1.尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的state 中，属性名就是模块名
2.使用模块中的数据:
1.直接通过模块名访问 $store.state.模块名.xxx
2.通过 mapState 映射
1.默认根级别的映射 mapstate(['xxx'])
2.子模块的映射 mapstate('模块名',['xxx'])-需要开启命名空间
export defaultf
namespaced: true, //命名空间开启
state,
mutations,
actions,
getters
}
2.目标:掌握模块中 getters 的访问语法
1.使用模块中 getters 中的数据:
1.直接通过模块名访问 $store.getters['模块名/xxx']
2.通过 mapGetters 映射
1.默认根级别的映射 mapGetters(['xxx'1)
2.模块的映射 mapGetters('模块名',['xxX'])-需要开启命名空间
3.目标:掌握模块中 mutation 的调用语法
1.注意:默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块
2.调用子模块中 mutation:
1.直接通过 store 调用 $store.commit('模块名/xxx',额外参数)
2.通过 mapMutations 映射
1.默认根级别的映射 mapMutations(['xxx'])
2.子模块的映射 mapMutations('模块名',['xxx'])-需要开启命名空间
4.目标:掌握模块中 action 的调用语法(同理-直接类比 mutation 即可)
1.注意:默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。
2.调用子模块中 action:
1.直接通过 store 调用 $store.dispatch('模块名/xxx'，额外参数)
2.通过 mapActions 映射
1.默认根级别的映射 mapActions(['xxx'])
2.子模块的映射 mapActions('模块名',['xxx'])-需要开启命名空间
4.购物车案例（第100-104集）
