一、Vuex簡介
官方定義
- Vuex是一個專門爲Vue.js應用程序開的狀態管理模式
- 它採用集中式存儲管理應用的所有組件的狀態
- 並以相應的規則保證以一種可預測的方式發生變化
二、應用場景
- 多個視圖依賴於同一狀態
- 來自不同視圖的行爲需要改變同一個狀態
三、Vuex的安裝和組成介紹
- State——數據倉庫，存儲所有數據狀態
- Getter——用來獲取數據的
- Mutation——用來修改數據的，同步
- Action——用來提交mutation，異步
安裝
- 安裝vuex包：npm install vuex
- 創建vuex實例：new Vuex.store()
- Main.js中將vuex實例掛載到vue對象上
四、實現count++
- State中創建count字段
- Mutations中創建一個count++的mutation
- Button新增click事件觸發mutation改變count
核心代碼
App.vue
main.js
