學習vue基礎知識（二）

vuex

全局狀態管理

1. 多組件共享狀態 多個組件使用同一個數據

2. 任何一個組件發生改變 其餘的組件也要跟着發生相應的變化

基本使用

0. 下載 npm install vuex

1. 建立全局狀態管理的實例

2. 註冊

3. 在組件裏使用全局狀態值 a.獲取渲染全局狀態值b.修改全局狀態值

5大核心

state 全局狀態數據mutation 規定只有mutation才能修改state 經過commit方法觸發action 能夠放異步操做 觸發mutation 經過dispatch 觸發getter vuex裏的計算屬性 和state值進行關聯 state發生改變 能夠從新計算，而且能夠在頁面上直接使用

action 存放異步

1. 統一管理異步請求減小代碼量

2. 時間旅行更加準確 vue的開發者工具

vue開發者工具

開發者工具綠了 該網頁必定是vue作的vue作的網頁開發者工具不必定綠

最簡版

1. 組件裏經過 $store.state 獲取全局狀態數據進行渲染

2. 經過 $store.commit 方法觸發mutation 修改全局狀態值 整個頁面都會變

模塊化

1. 模塊化以後state的取值須要添加一級模塊名 其餘的三個核心不變

2. 能夠在模塊裏添加命名空間 做用就是在 mutation getters actions的名字前面 添加模塊名用處就是防止名字衝突

稍微複雜版

1. 組件裏經過 $store.state 獲取全局狀態數據進行渲染

2. 經過 $store.dispath方法 觸發action裏的方法

3. action 觸發mutation進行修改全局狀態值

輔助函數

幫助咱們減小代碼量

值類型向計算屬性映射

mapState 將全局狀態管理的state值映射到使用組價的計算屬性mapGetters 將全局狀態管理的getters值映射到使用組價的計算屬性

函數類型向methods進行映射

mapMutations 將mutation的值映射到 方法裏mapActions 將actions裏的值映射到方法。