快速學會使用Vuex

• 2019 年 10 月 11 日
• 筆記

一、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