#vue2筆記
##?腳手架文件結(jié)構(gòu)
???├──?node_modules?
???├──?public
???│???├──?favicon.ico:?頁簽圖標(biāo)
???│???└──?index.html:?主頁面
???├──?src
???│???├──?assets:?存放靜態(tài)資源
???│???│???└──?logo.png
???│???│──?component:?存放組件
???│???│???└──?HelloWorld.vue
???│???│──?App.vue:?匯總所有組件
???│???│──?main.js:?入口文件
???├──?.gitignore:?git版本管制忽略的配置
???├──?babel.config.js:?babel的配置文件
???├──?package.json:?應(yīng)用包配置文件?
???├──?README.md:?應(yīng)用描述文件
???├──?package-lock.json：包版本控制文件
##?關(guān)于不同版本的Vue
1.?vue.js與vue.runtime.xxx.js的區(qū)別：
????1.?vue.js是完整版的Vue处嫌，包含：核心功能?+?模板解析器枫虏。
????2.?vue.runtime.xxx.js是運(yùn)行版的Vue才睹，只包含：核心功能；沒有模板解析器讳推。
2.?因?yàn)関ue.runtime.xxx.js沒有模板解析器，所以不能使用template這個(gè)配置項(xiàng)玩般，需要使用render函數(shù)接收到的createElement函數(shù)去指定具體內(nèi)容银觅。
##?vue.config.js配置文件
1.?使用vue?inspect?>?output.js可以查看到Vue腳手架的默認(rèn)配置。
2.?使用vue.config.js可以對(duì)腳手架進(jìn)行個(gè)性化定制坏为，詳情見：https://cli.vuejs.org/zh
##?ref屬性
1.?被用來給元素或子組件注冊(cè)引用信息（id的替代者）
2.?應(yīng)用在html標(biāo)簽上獲取的是真實(shí)DOM元素究驴，應(yīng)用在組件標(biāo)簽上是組件實(shí)例對(duì)象（vc）
3.?使用方式：
????1.?打標(biāo)識(shí)：```<h1?ref="xxx">.....</h1>```?或?```<School?ref="xxx"></School>```
????2.?獲取：```this.$refs.xxx```
##?props配置項(xiàng)
1.?功能：讓組件接收外部傳過來的數(shù)據(jù)
2.?傳遞數(shù)據(jù)：```<Demo?name="xxx"/>```
3.?接收數(shù)據(jù)：
????1.?第一種方式（只接收）：```props:['name']?```
????2.?第二種方式（限制類型）：```props:{name:String}```
????3.?第三種方式（限制類型匀伏、限制必要性洒忧、指定默認(rèn)值）：
????????```js
????????props:{
?????????name:{
?????????type:String,?//類型
?????????required:true,?//必要性
?????????default:'老王'?//默認(rèn)值
?????????}
????????}
????????```
????>?備注：props是只讀的，Vue底層會(huì)監(jiān)測(cè)你對(duì)props的修改够颠，如果進(jìn)行了修改熙侍，就會(huì)發(fā)出警告，若業(yè)務(wù)需求確實(shí)需要修改履磨，那么請(qǐng)復(fù)制props的內(nèi)容到data中一份蛉抓，然后去修改data中的數(shù)據(jù)。
##?mixin(混入)
1.?功能：可以把多個(gè)組件共用的配置提取成一個(gè)混入對(duì)象
2.?使用方式：
????第一步定義混合：
????```
????{
????????data(){....},
????????methods:{....}
????????....
????}
????```
????第二步使用混入：
?????全局混入：```Vue.mixin(xxx)```
?????局部混入：```mixins:['xxx']??```
##?插件
1.?功能：用于增強(qiáng)Vue
2.?本質(zhì)：包含install方法的一個(gè)對(duì)象剃诅，install的第一個(gè)參數(shù)是Vue巷送，第二個(gè)以后的參數(shù)是插件使用者傳遞的數(shù)據(jù)。
3.?定義插件：
????```js
????對(duì)象.install?=?function?(Vue,?options)?{
????????//?1.?添加全局過濾器
????????Vue.filter(....)
????????//?2.?添加全局指令
????????Vue.directive(....)
????????//?3.?配置全局混入(合)
????????Vue.mixin(....)
????????//?4.?添加實(shí)例方法
????????Vue.prototype.$myMethod?=?function?()?{...}
????????Vue.prototype.$myProperty?=?xxxx
????}
????```
4.?使用插件：```Vue.use()```
##?scoped樣式
1.?作用：讓樣式在局部生效矛辕，防止沖突笑跛。
2.?寫法：```<style?scoped>```
##?總結(jié)TodoList案例
1.?組件化編碼流程：
?????(1).拆分靜態(tài)組件：組件要按照功能點(diǎn)拆分，命名不要與html元素沖突聊品。
?????(2).實(shí)現(xiàn)動(dòng)態(tài)組件：考慮好數(shù)據(jù)的存放位置飞蹂，數(shù)據(jù)是一個(gè)組件在用，還是一些組件在用：
???????????1).一個(gè)組件在用：放在組件自身即可杨刨。
???????????2).?一些組件在用：放在他們共同的父組件上（<span?style="color:red">狀態(tài)提升</span>）晤柄。
?????(3).實(shí)現(xiàn)交互：從綁定事件開始。
2.?props適用于：
?????(1).父組件?==>?子組件?通信
?????(2).子組件?==>?父組件?通信（要求父先給子一個(gè)函數(shù)）
3.?使用v-model時(shí)要切記：v-model綁定的值不能是props傳過來的值妖胀，因?yàn)閜rops是不可以修改的！
4.?props傳過來的若是對(duì)象類型的值惠勒，修改對(duì)象中的屬性時(shí)Vue不會(huì)報(bào)錯(cuò)赚抡，但不推薦這樣做。
##?webStorage
1.?存儲(chǔ)內(nèi)容大小一般支持5MB左右（不同瀏覽器可能還不一樣）
2.?瀏覽器端通過?Window.sessionStorage?和?Window.localStorage?屬性來實(shí)現(xiàn)本地存儲(chǔ)機(jī)制纠屋。
3.?相關(guān)API：
????1.?```xxxxxStorage.setItem('key',?'value');```
??????????????????該方法接受一個(gè)鍵和值作為參數(shù)涂臣，會(huì)把鍵值對(duì)添加到存儲(chǔ)中，如果鍵名存在，則更新其對(duì)應(yīng)的值赁遗。
????2.?```xxxxxStorage.getItem('person');```
??????????????該方法接受一個(gè)鍵名作為參數(shù)署辉，返回鍵名對(duì)應(yīng)的值。
????3.?```xxxxxStorage.removeItem('key');```
??????????????該方法接受一個(gè)鍵名作為參數(shù)岩四，并把該鍵名從存儲(chǔ)中刪除哭尝。
????4.?```?xxxxxStorage.clear()```
??????????????該方法會(huì)清空存儲(chǔ)中的所有數(shù)據(jù)。
4.?備注：
????1.?SessionStorage存儲(chǔ)的內(nèi)容會(huì)隨著瀏覽器窗口關(guān)閉而消失剖煌。
????2.?LocalStorage存儲(chǔ)的內(nèi)容材鹦，需要手動(dòng)清除才會(huì)消失。
????3.?```xxxxxStorage.getItem(xxx)```如果xxx對(duì)應(yīng)的value獲取不到耕姊，那么getItem的返回值是null桶唐。
????4.?```JSON.parse(null)```的結(jié)果依然是null。
##?組件的自定義事件
1.?一種組件間通信的方式茉兰，適用于：<strong?style="color:red">子組件?===>?父組件</strong>
2.?使用場(chǎng)景：A是父組件尤泽，B是子組件，B想給A傳數(shù)據(jù)规脸，那么就要在A中給B綁定自定義事件（<span?style="color:red">事件的回調(diào)在A中</span>）坯约。
3.?綁定自定義事件：
????1.?第一種方式，在父組件中：```<Demo?@atguigu="test"/>```??或?```<Demo?v-on:atguigu="test"/>```
????2.?第二種方式燃辖，在父組件中：
????????```js
????????<Demo?ref="demo"/>
????????......
????????mounted(){
???????????this.$refs.xxx.$on('atguigu',this.test)
????????}
????????```
????3.?若想讓自定義事件只能觸發(fā)一次鬼店，可以使用```once```修飾符，或```$once```方法黔龟。
4.?觸發(fā)自定義事件：```this.$emit('atguigu',數(shù)據(jù))```????
5.?解綁自定義事件```this.$off('atguigu')```
6.?組件上也可以綁定原生DOM事件妇智，需要使用```native```修飾符。
7.?注意：通過```this.$refs.xxx.$on('atguigu',回調(diào))```綁定自定義事件時(shí)氏身，回調(diào)<span?style="color:red">要么配置在methods中</span>巍棱，<span?style="color:red">要么用箭頭函數(shù)</span>，否則this指向會(huì)出問題蛋欣！
##?全局事件總線（GlobalEventBus）
1.?一種組件間通信的方式航徙，適用于<span?style="color:red">任意組件間通信</span>。
2.?安裝全局事件總線：
???```js
???new?Vue({
??????......
??????beforeCreate()?{
?????????Vue.prototype.$bus?=?this?//安裝全局事件總線陷虎，$bus就是當(dāng)前應(yīng)用的vm
??????},
???????......
???})?
???```
3.?使用事件總線：
???1.?接收數(shù)據(jù)：A組件想接收數(shù)據(jù)到踏，則在A組件中給$bus綁定自定義事件，事件的<span?style="color:red">回調(diào)留在A組件自身尚猿。</span>
??????```js
??????methods(){
????????demo(data){......}
??????}
??????......
??????mounted()?{
????????this.$bus.$on('xxxx',this.demo)
??????}
??????```
???2.?提供數(shù)據(jù)：```this.$bus.$emit('xxxx',數(shù)據(jù))```
4.?最好在beforeDestroy鉤子中窝稿，用$off去解綁<span?style="color:red">當(dāng)前組件所用到的</span>事件。
##?消息訂閱與發(fā)布（pubsub）
1.???一種組件間通信的方式凿掂，適用于<span?style="color:red">任意組件間通信</span>伴榔。
2.?使用步驟：
???1.?安裝pubsub：```npm?i?pubsub-js```
???2.?引入:?```import?pubsub?from?'pubsub-js'```
???3.?接收數(shù)據(jù)：A組件想接收數(shù)據(jù)，則在A組件中訂閱消息，訂閱的<span?style="color:red">回調(diào)留在A組件自身踪少。</span>
??????```js
??????methods(){
????????demo(data){......}
??????}
??????......
??????mounted()?{
????????this.pid?=?pubsub.subscribe('xxx',this.demo)?//訂閱消息
??????}
??????```
???4.?提供數(shù)據(jù)：```pubsub.publish('xxx',數(shù)據(jù))```
???5.?最好在beforeDestroy鉤子中塘安，用```PubSub.unsubscribe(pid)```去<span?style="color:red">取消訂閱。</span>
##?nextTick
1.?語法：```this.$nextTick(回調(diào)函數(shù))```
2.?作用：在下一次?DOM?更新結(jié)束后執(zhí)行其指定的回調(diào)援奢。
3.?什么時(shí)候用：當(dāng)改變數(shù)據(jù)后兼犯，要基于更新后的新DOM進(jìn)行某些操作時(shí)，要在nextTick所指定的回調(diào)函數(shù)中執(zhí)行萝究。
##?Vue封裝的過度與動(dòng)畫
1.?作用：在插入免都、更新或移除?DOM元素時(shí)，在合適的時(shí)候給元素添加樣式類名帆竹。
2.?圖示：<img?src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105"?style="width:60%"?/>
3.?寫法：
???1.?準(zhǔn)備好樣式：
??????-?元素進(jìn)入的樣式：
????????1.?v-enter：進(jìn)入的起點(diǎn)
????????2.?v-enter-active：進(jìn)入過程中
????????3.?v-enter-to：進(jìn)入的終點(diǎn)
??????-?元素離開的樣式：
????????1.?v-leave：離開的起點(diǎn)
????????2.?v-leave-active：離開過程中
????????3.?v-leave-to：離開的終點(diǎn)
???2.?使用```<transition>```包裹要過度的元素绕娘，并配置name屬性：
??????```vue
??????<transition?name="hello">
?????????<h1?v-show="isShow">你好啊栽连！</h1>
??????</transition>
??????```
???3.?備注：若有多個(gè)元素需要過度险领，則需要使用：```<transition-group>```，且每個(gè)元素都要指定```key```值秒紧。
##?vue腳手架配置代理
###?方法一
??在vue.config.js中添加如下配置：
```js
devServer:{
??proxy:"http://localhost:5000"
}
```
說明：
1.?優(yōu)點(diǎn)：配置簡(jiǎn)單绢陌，請(qǐng)求資源時(shí)直接發(fā)給前端（8080）即可。
2.?缺點(diǎn)：不能配置多個(gè)代理熔恢，不能靈活的控制請(qǐng)求是否走代理脐湾。
3.?工作方式：若按照上述配置代理，當(dāng)請(qǐng)求了前端不存在的資源時(shí)叙淌，那么該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給服務(wù)器?（優(yōu)先匹配前端資源）
###?方法二
??編寫vue.config.js配置具體代理規(guī)則：
```js
module.exports?=?{
???devServer:?{
??????proxy:?{
??????'/api1':?{//?匹配所有以?'/api1'開頭的請(qǐng)求路徑
????????target:?'http://localhost:5000',//?代理目標(biāo)的基礎(chǔ)路徑
????????changeOrigin:?true,
????????pathRewrite:?{'^/api1':?''}
??????},
??????'/api2':?{//?匹配所有以?'/api2'開頭的請(qǐng)求路徑
????????target:?'http://localhost:5001',//?代理目標(biāo)的基礎(chǔ)路徑
????????changeOrigin:?true,
????????pathRewrite:?{'^/api2':?''}
??????}
????}
??}
}
/*
???changeOrigin設(shè)置為true時(shí)秤掌，服務(wù)器收到的請(qǐng)求頭中的host為：localhost:5000
???changeOrigin設(shè)置為false時(shí)，服務(wù)器收到的請(qǐng)求頭中的host為：localhost:8080
???changeOrigin默認(rèn)值為true
*/
```
說明：
1.?優(yōu)點(diǎn)：可以配置多個(gè)代理鹰霍，且可以靈活的控制請(qǐng)求是否走代理闻鉴。
2.?缺點(diǎn)：配置略微繁瑣，請(qǐng)求資源時(shí)必須加前綴茂洒。
##?插槽
1.?作用：讓父組件可以向子組件指定位置插入html結(jié)構(gòu)孟岛，也是一種組件間通信的方式，適用于?<strong?style="color:red">父組件?===>?子組件</strong>?督勺。
2.?分類：默認(rèn)插槽渠羞、具名插槽、作用域插槽
3.?使用方式：
???1.?默認(rèn)插槽：
??????```vue
??????父組件中：
??????????????<Category>
?????????????????<div>html結(jié)構(gòu)1</div>
??????????????</Category>
??????子組件中：
??????????????<template>
??????????????????<div>
?????????????????????<!--?定義插槽?-->
?????????????????????<slot>插槽默認(rèn)內(nèi)容...</slot>
??????????????????</div>
??????????????</template>
??????```
???2.?具名插槽：
??????```vue
??????父組件中：
??????????????<Category>
??????????????????<template?slot="center">
????????????????????<div>html結(jié)構(gòu)1</div>
??????????????????</template>
??????????????????<template?v-slot:footer>
?????????????????????<div>html結(jié)構(gòu)2</div>
??????????????????</template>
??????????????</Category>
??????子組件中：
??????????????<template>
??????????????????<div>
?????????????????????<!--?定義插槽?-->
?????????????????????<slot?name="center">插槽默認(rèn)內(nèi)容...</slot>
?????????????????????<slot?name="footer">插槽默認(rèn)內(nèi)容...</slot>
??????????????????</div>
??????????????</template>
??????```
???3.?作用域插槽：
??????1.?理解：<span?style="color:red">數(shù)據(jù)在組件的自身智哀，但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者來決定堵未。</span>（games數(shù)據(jù)在Category組件中，但使用數(shù)據(jù)所遍歷出來的結(jié)構(gòu)由App組件決定）
??????2.?具體編碼：
?????????```vue
?????????父組件中：
???????????????<Category>
??????????????????<template?scope="scopeData">
?????????????????????<!--?生成的是ul列表?-->
?????????????????????<ul>
????????????????????????<li?v-for="g?in?scopeData.games"?:key="g">{{g}}</li>
?????????????????????</ul>
??????????????????</template>
???????????????</Category>
???????????????<Category>
??????????????????<template?slot-scope="scopeData">
?????????????????????<!--?生成的是h4標(biāo)題?-->
?????????????????????<h4?v-for="g?in?scopeData.games"?:key="g">{{g}}</h4>
??????????????????</template>
???????????????</Category>
?????????子組件中：
?????????????????<template>
?????????????????????<div>
?????????????????????????<slot?:games="games"></slot>
?????????????????????</div>
?????????????????</template>
?????????????????<script>
?????????????????????export?default?{
?????????????????????????name:'Category',
?????????????????????????props:['title'],
?????????????????????????//數(shù)據(jù)在子組件自身
?????????????????????????data()?{
?????????????????????????????return?{
?????????????????????????????????games:['紅色警戒','穿越火線','勁舞團(tuán)','超級(jí)瑪麗']
?????????????????????????????}
?????????????????????????},
?????????????????????}
?????????????????</script>
?????????```
???```
???```
##?Vuex
###?1.概念
?????在Vue中實(shí)現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個(gè)Vue插件盏触，對(duì)vue應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信赞辩。
###?2.何時(shí)使用雌芽？
?????多個(gè)組件需要共享數(shù)據(jù)時(shí)
###?3.搭建vuex環(huán)境
1.?創(chuàng)建文件：```src/store/index.js```
???```js
???//引入Vue核心庫
???import?Vue?from?'vue'
???//引入Vuex
???import?Vuex?from?'vuex'
???//應(yīng)用Vuex插件
???Vue.use(Vuex)
???//準(zhǔn)備actions對(duì)象——響應(yīng)組件中用戶的動(dòng)作
???const?actions?=?{}
???//準(zhǔn)備mutations對(duì)象——修改state中的數(shù)據(jù)
???const?mutations?=?{}
???//準(zhǔn)備state對(duì)象——保存具體的數(shù)據(jù)
???const?state?=?{}
???//創(chuàng)建并暴露store
???export?default?new?Vuex.Store({
??????actions,
??????mutations,
??????state
???})
???```
2.?在```main.js```中創(chuàng)建vm時(shí)傳入```store```配置項(xiàng)
???```js
???......
???//引入store
???import?store?from?'./store'
???......
???//創(chuàng)建vm
???new?Vue({
??????el:'#app',
??????render:?h?=>?h(App),
??????store
???})
???```
###????4.基本使用
1.?初始化數(shù)據(jù)、配置```actions```辨嗽、配置```mutations```世落，操作文件```store.js```
???```js
???//引入Vue核心庫
???import?Vue?from?'vue'
???//引入Vuex
???import?Vuex?from?'vuex'
???//引用Vuex
???Vue.use(Vuex)
???const?actions?=?{
???????//響應(yīng)組件中加的動(dòng)作
??????jia(context,value){
?????????//?console.log('actions中的jia被調(diào)用了',miniStore,value)
?????????context.commit('JIA',value)
??????},
???}
???const?mutations?=?{
???????//執(zhí)行加
??????JIA(state,value){
?????????//?console.log('mutations中的JIA被調(diào)用了',state,value)
?????????state.sum?+=?value
??????}
???}
???//初始化數(shù)據(jù)
???const?state?=?{
??????sum:0
???}
???//創(chuàng)建并暴露store
???export?default?new?Vuex.Store({
??????actions,
??????mutations,
??????state,
???})
???```
2.?組件中讀取vuex中的數(shù)據(jù)：```$store.state.sum```
3.?組件中修改vuex中的數(shù)據(jù)：```$store.dispatch('action中的方法名',數(shù)據(jù))```?或?```$store.commit('mutations中的方法名',數(shù)據(jù))```
???>??備注：若沒有網(wǎng)絡(luò)請(qǐng)求或其他業(yè)務(wù)邏輯，組件中也可以越過actions糟需，即不寫```dispatch```屉佳，直接編寫```commit```
###?5.getters的使用
1.?概念：當(dāng)state中的數(shù)據(jù)需要經(jīng)過加工后再使用時(shí)，可以使用getters加工洲押。
2.?在```store.js```中追加```getters```配置
???```js
???......
???const?getters?=?{
??????bigSum(state){
?????????return?state.sum?*?10
??????}
???}
???//創(chuàng)建并暴露store
???export?default?new?Vuex.Store({
??????......
??????getters
???})
???```
3.?組件中讀取數(shù)據(jù)：```$store.getters.bigSum```
###?6.四個(gè)map方法的使用
1.?<strong>mapState方法：</strong>用于幫助我們映射```state```中的數(shù)據(jù)為計(jì)算屬性
???```js
???computed:?{
???????//借助mapState生成計(jì)算屬性：sum武花、school、subject（對(duì)象寫法）
????????...mapState({sum:'sum',school:'school',subject:'subject'}),
???????//借助mapState生成計(jì)算屬性：sum杈帐、school体箕、subject（數(shù)組寫法）
???????...mapState(['sum','school','subject']),
???},
???```
2.?<strong>mapGetters方法：</strong>用于幫助我們映射```getters```中的數(shù)據(jù)為計(jì)算屬性
???```js
???computed:?{
???????//借助mapGetters生成計(jì)算屬性：bigSum（對(duì)象寫法）
???????...mapGetters({bigSum:'bigSum'}),
???????//借助mapGetters生成計(jì)算屬性：bigSum（數(shù)組寫法）
???????...mapGetters(['bigSum'])
???},
???```
3.?<strong>mapActions方法：</strong>用于幫助我們生成與```actions```對(duì)話的方法，即：包含```$store.dispatch(xxx)```的函數(shù)
???```js
???methods:{
???????//靠mapActions生成：incrementOdd挑童、incrementWait（對(duì)象形式）
???????...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
???????//靠mapActions生成：incrementOdd累铅、incrementWait（數(shù)組形式）
???????...mapActions(['jiaOdd','jiaWait'])
???}
???```
4.?<strong>mapMutations方法：</strong>用于幫助我們生成與```mutations```對(duì)話的方法，即：包含```$store.commit(xxx)```的函數(shù)
???```js
???methods:{
???????//靠mapActions生成：increment站叼、decrement（對(duì)象形式）
???????...mapMutations({increment:'JIA',decrement:'JIAN'}),
???????//靠mapMutations生成：JIA娃兽、JIAN（對(duì)象形式）
???????...mapMutations(['JIA','JIAN']),
???}
???```
>?備注：mapActions與mapMutations使用時(shí)，若需要傳遞參數(shù)需要：在模板中綁定事件時(shí)傳遞好參數(shù)尽楔，否則參數(shù)是事件對(duì)象投储。
###?7.模塊化+命名空間
1.?目的：讓代碼更好維護(hù)，讓多種數(shù)據(jù)分類更加明確翔试。
2.?修改```store.js```
???```javascript
???const?countAbout?=?{
?????namespaced:true,//開啟命名空間
?????state:{x:1},
?????mutations:?{?...?},
?????actions:?{?...?},
?????getters:?{
???????bigSum(state){
??????????return?state.sum?*?10
???????}
?????}
???}
???const?personAbout?=?{
?????namespaced:true,//開啟命名空間
?????state:{?...?},
?????mutations:?{?...?},
?????actions:?{?...?}
???}
???const?store?=?new?Vuex.Store({
?????modules:?{
???????countAbout,
???????personAbout
?????}
???})
???```
3.?開啟命名空間后轻要，組件中讀取state數(shù)據(jù)：
???```js
???//方式一：自己直接讀取
???this.$store.state.personAbout.list
???//方式二：借助mapState讀取：
???...mapState('countAbout',['sum','school','subject']),
???```
4.?開啟命名空間后垦缅，組件中讀取getters數(shù)據(jù)：
???```js
???//方式一：自己直接讀取
???this.$store.getters['personAbout/firstPersonName']
???//方式二：借助mapGetters讀瘸迥唷：
???...mapGetters('countAbout',['bigSum'])
???```
5.?開啟命名空間后，組件中調(diào)用dispatch
???```js
???//方式一：自己直接dispatch
???this.$store.dispatch('personAbout/addPersonWang',person)
???//方式二：借助mapActions：
???...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
???```
6.?開啟命名空間后壁涎，組件中調(diào)用commit
???```js
???//方式一：自己直接commit
???this.$store.commit('personAbout/ADD_PERSON',person)
???//方式二：借助mapMutations：
???...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
???```
?##?路由
1.?理解：?一個(gè)路由（route）就是一組映射關(guān)系（key?-?value）凡恍，多個(gè)路由需要路由器（router）進(jìn)行管理。
2.?前端路由：key是路徑怔球，value是組件嚼酝。
###?1.基本使用
1.?安裝vue-router，命令：```npm?i?vue-router```
2.?應(yīng)用插件：```Vue.use(VueRouter)```
3.?編寫router配置項(xiàng):
???```js
???//引入VueRouter
???import?VueRouter?from?'vue-router'
???//引入Luyou?組件
???import?About?from?'../components/About'
???import?Home?from?'../components/Home'
???//創(chuàng)建router實(shí)例對(duì)象竟坛，去管理一組一組的路由規(guī)則
???const?router?=?new?VueRouter({
??????routes:[
?????????{
????????????path:'/about',
????????????component:About
?????????},
?????????{
????????????path:'/home',
????????????component:Home
?????????}
??????]
???})
???//暴露router
???export?default?router
???```
4.?實(shí)現(xiàn)切換（active-class可配置高亮樣式）
???```vue
???<router-link?active-class="active"?to="/about">About</router-link>
???```
5.?指定展示位置
???```vue
???<router-view></router-view>
???```
###?2.幾個(gè)注意點(diǎn)
1.?路由組件通常存放在```pages```文件夾闽巩，一般組件通常存放在```components```文件夾钧舌。
2.?通過切換，“隱藏”了的路由組件涎跨，默認(rèn)是被銷毀掉的洼冻，需要的時(shí)候再去掛載。
3.?每個(gè)組件都有自己的```$route```屬性隅很，里面存儲(chǔ)著自己的路由信息撞牢。
4.?整個(gè)應(yīng)用只有一個(gè)router，可以通過組件的```$router```屬性獲取到叔营。
###?3.多級(jí)路由（多級(jí)路由）
1.?配置路由規(guī)則屋彪，使用children配置項(xiàng)：
???```js
???routes:[
??????{
?????????path:'/about',
?????????component:About,
??????},
??????{
?????????path:'/home',
?????????component:Home,
?????????children:[?//通過children配置子級(jí)路由
????????????{
???????????????path:'news',?//此處一定不要寫：/news
???????????????component:News
????????????},
????????????{
???????????????path:'message',//此處一定不要寫：/message
???????????????component:Message
????????????}
?????????]
??????}
???]
???```
2.?跳轉(zhuǎn)（要寫完整路徑）：
???```vue
???<router-link?to="/home/news">News</router-link>
???```
###?4.路由的query參數(shù)
1.?傳遞參數(shù)
???```vue
???<!--?跳轉(zhuǎn)并攜帶query參數(shù)，to的字符串寫法?-->
???<router-link?:to="/home/message/detail?id=666&title=你好">跳轉(zhuǎn)</router-link>
???<!--?跳轉(zhuǎn)并攜帶query參數(shù)绒尊，to的對(duì)象寫法?-->
???<router-link?
??????:to="{
?????????path:'/home/message/detail',
?????????query:{
????????????id:666,
???????????????title:'你好'
?????????}
??????}"
???>跳轉(zhuǎn)</router-link>
???```
2.?接收參數(shù)：
???```js
???$route.query.id
???$route.query.title
???```
###?5.命名路由
1.?作用：可以簡(jiǎn)化路由的跳轉(zhuǎn)畜挥。
2.?如何使用
???1.?給路由命名：
??????```js
??????{
?????????path:'/demo',
?????????component:Demo,
?????????children:[
????????????{
???????????????path:'test',
???????????????component:Test,
???????????????children:[
??????????????????{
????????????????????????????name:'hello'?//給路由命名
?????????????????????path:'welcome',
?????????????????????component:Hello,
??????????????????}
???????????????]
????????????}
?????????]
??????}
??????```
???2.?簡(jiǎn)化跳轉(zhuǎn)：
??????```vue
??????<!--簡(jiǎn)化前，需要寫完整的路徑?-->
??????<router-link?to="/demo/test/welcome">跳轉(zhuǎn)</router-link>
??????<!--簡(jiǎn)化后垒酬，直接通過名字跳轉(zhuǎn)?-->
??????<router-link?:to="{name:'hello'}">跳轉(zhuǎn)</router-link>
??????<!--簡(jiǎn)化寫法配合傳遞參數(shù)?-->
??????<router-link?
?????????:to="{
????????????name:'hello',
????????????query:{
???????????????id:666,
??????????????????title:'你好'
????????????}
?????????}"
??????>跳轉(zhuǎn)</router-link>
??????```
###?6.路由的params參數(shù)
1.?配置路由砰嘁，聲明接收params參數(shù)
???```js
???{
??????path:'/home',
??????component:Home,
??????children:[
?????????{
????????????path:'news',
????????????component:News
?????????},
?????????{
????????????component:Message,
????????????children:[
???????????????{
??????????????????name:'xiangqing',
??????????????????path:'detail/:id/:title',?//使用占位符聲明接收params參數(shù)
??????????????????component:Detail
???????????????}
????????????]
?????????}
??????]
???}
???```
2.?傳遞參數(shù)
???```vue
???<!--?跳轉(zhuǎn)并攜帶params參數(shù)，to的字符串寫法?-->
???<router-link?:to="/home/message/detail/666/你好">跳轉(zhuǎn)</router-link>
???<!--?跳轉(zhuǎn)并攜帶params參數(shù)勘究，to的對(duì)象寫法?-->
???<router-link?
??????:to="{
?????????name:'xiangqing',
?????????params:{
????????????id:666,
???????????????title:'你好'
?????????}
??????}"
???>跳轉(zhuǎn)</router-link>
???```
???>?特別注意：路由攜帶params參數(shù)時(shí)矮湘，若使用to的對(duì)象寫法，則不能使用path配置項(xiàng)口糕，必須使用name配置缅阳！
3.?接收參數(shù)：
???```js
???$route.params.id
???$route.params.title
???```
###?7.路由的props配置
??作用：讓路由組件更方便的收到參數(shù)
```js
{
???name:'xiangqing',
???path:'detail/:id',
???component:Detail,
???//第一種寫法：props值為對(duì)象，該對(duì)象中所有的key-value的組合最終都會(huì)通過props傳給Detail組件
???//?props:{a:900}
???//第二種寫法：props值為布爾值景描，布爾值為true十办，則把路由收到的所有params參數(shù)通過props傳給Detail組件
???//?props:true
???//第三種寫法：props值為函數(shù)，該函數(shù)返回的對(duì)象中每一組key-value都會(huì)通過props傳給Detail組件
???props(route){
??????return?{
?????????id:route.query.id,
?????????title:route.query.title
??????}
???}
}
```
###?8.```<router-link>```的replace屬性
1.?作用：控制路由跳轉(zhuǎn)時(shí)操作瀏覽器歷史記錄的模式
2.?瀏覽器的歷史記錄有兩種寫入方式：分別為```push```和```replace```超棺，```push```是追加歷史記錄向族，```replace```是替換當(dāng)前記錄。路由跳轉(zhuǎn)時(shí)候默認(rèn)為```push```
3.?如何開啟```replace```模式：```<router-link?replace?.......>News</router-link>```
###?9.編程式路由導(dǎo)航
1.?作用：不借助```<router-link>?```實(shí)現(xiàn)路由跳轉(zhuǎn)棠绘，讓路由跳轉(zhuǎn)更加靈活
2.?具體編碼：
???```js
???//$router的兩個(gè)API
???this.$router.push({
??????name:'xiangqing',
?????????params:{
????????????id:xxx,
????????????title:xxx
?????????}
???})
???this.$router.replace({
??????name:'xiangqing',
?????????params:{
????????????id:xxx,
????????????title:xxx
?????????}
???})
???this.$router.forward()?//前進(jìn)
???this.$router.back()?//后退
???this.$router.go()?//可前進(jìn)也可后退
???```
###?10.緩存路由組件
1.?作用：讓不展示的路由組件保持掛載件相，不被銷毀。
2.?具體編碼：
???```vue
???<keep-alive?include="News">?
???????<router-view></router-view>
???</keep-alive>
???```
###?11.兩個(gè)新的生命周期鉤子
1.?作用：路由組件所獨(dú)有的兩個(gè)鉤子氧苍，用于捕獲路由組件的激活狀態(tài)夜矗。
2.?具體名字：
???1.?```activated```路由組件被激活時(shí)觸發(fā)。
???2.?```deactivated```路由組件失活時(shí)觸發(fā)让虐。
###?12.路由守衛(wèi)
1.?作用：對(duì)路由進(jìn)行權(quán)限控制
2.?分類：全局守衛(wèi)紊撕、獨(dú)享守衛(wèi)、組件內(nèi)守衛(wèi)
3.?全局守衛(wèi):
???```js
???//全局前置守衛(wèi)：初始化時(shí)執(zhí)行赡突、每次路由切換前執(zhí)行
???router.beforeEach((to,from,next)=>{
??????console.log('beforeEach',to,from)
??????if(to.meta.isAuth){?//判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制
?????????if(localStorage.getItem('school')?===?'atguigu'){?//權(quán)限控制的具體規(guī)則
????????????next()?//放行
?????????}else{
????????????alert('暫無權(quán)限查看')
????????????//?next({name:'guanyu'})
?????????}
??????}else{
?????????next()?//放行
??????}
???})
???//全局后置守衛(wèi)：初始化時(shí)執(zhí)行对扶、每次路由切換后執(zhí)行
???router.afterEach((to,from)=>{
??????console.log('afterEach',to,from)
??????if(to.meta.title){?
?????????document.title?=?to.meta.title?//修改網(wǎng)頁的title
??????}else{
?????????document.title?=?'vue_test'
??????}
???})
???```
4.?獨(dú)享守衛(wèi):
???```js
???beforeEnter(to,from,next){
??????console.log('beforeEnter',to,from)
??????if(to.meta.isAuth){?//判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制
?????????if(localStorage.getItem('school')?===?'atguigu'){
????????????next()
?????????}else{
????????????alert('暫無權(quán)限查看')
????????????//?next({name:'guanyu'})
?????????}
??????}else{
?????????next()
??????}
???}
???```
5.?組件內(nèi)守衛(wèi)：
???```js
???//進(jìn)入守衛(wèi)：通過路由規(guī)則区赵，進(jìn)入該組件時(shí)被調(diào)用
???beforeRouteEnter?(to,?from,?next)?{
???},
???//離開守衛(wèi)：通過路由規(guī)則，離開該組件時(shí)被調(diào)用
???beforeRouteLeave?(to,?from,?next)?{
???}
???```
###?13.路由器的兩種工作模式
1.?對(duì)于一個(gè)url來說辩稽，什么是hash值惧笛？——?#及其后面的內(nèi)容就是hash值。
2.?hash值不會(huì)包含在?HTTP?請(qǐng)求中逞泄，即：hash值不會(huì)帶給服務(wù)器。
3.?hash模式：
???1.?地址中永遠(yuǎn)帶著#號(hào)拜效，不美觀?喷众。
???2.?若以后將地址通過第三方手機(jī)app分享，若app校驗(yàn)嚴(yán)格紧憾，則地址會(huì)被標(biāo)記為不合法到千。
???3.?兼容性較好。
4.?history模式：
???1.?地址干凈赴穗，美觀?憔四。
???2.?兼容性和hash模式相比略差。
???3.?應(yīng)用部署上線時(shí)需要后端人員支持般眉，解決刷新頁面服務(wù)端404的問題了赵。
