1. 安裝及簡(jiǎn)單介紹
Vue2使用3.6.1的vuex npm i vue@3.6.1 -s 或者腳手架安裝選擇vuex(注意看下配置文件的版本號(hào)是不是3.6.1).
vuex就是多了一個(gè)公共的js 所有的組件都可訪問修改其中存儲(chǔ)的變量數(shù)值 這樣省去組件之間通信的麻煩.
2. 組件通信的方法
- 父?jìng)髯?自定義屬性 props
- 子傳父 自定義事件
on監(jiān)聽事件
- 組件間傳值 事件總線 eventBus
-
children 父子組件間 通過修改組件的data
- provide/inject 多層嵌套組件間傳值
- vuex 全局狀態(tài)管理
3. vuex五個(gè)屬性
image.png
4. vuex映射方法
上面mutatuons等其他屬性 在組件內(nèi)都有自己的調(diào)用方式.
如state讀取數(shù)據(jù).
$store.state.數(shù)據(jù)名
mutations調(diào)用函數(shù).
this.store.commit('函數(shù)名')
映射將這些調(diào)用函數(shù)的方法和讀取數(shù)據(jù)的方式做了簡(jiǎn)化 通過映射的方式.
從vuex引入四種屬性的映射
image.png
在組件方法中把vuex文件里的方法直接映射出來 組件可以直接使用.
image.png
mutations和actions映射后語法 直接調(diào)用映射出來的函數(shù)名.
image.png
state讀取數(shù)據(jù)和getter計(jì)算屬性映射后讀取方法.
image.png
5. provide inject父?jìng)髯?/h2>
使用provide設(shè)置要傳遞的變量值后 父組件下的所有子組件 子組件的子組件都可以直接inject獲得傳遞的變量值.
image.png
image.png
