01、什麼是Vuex？

1.1、為什麼需要狀態管理？

在複雜的系統中，我們會把系統按照業務邏輯拆分為多個層次、多個模組，採用元件式的開發方式。而此時不同模組、父子模組之間的通訊就成了一個問題。

為了解決這個問題，就有了狀態管理，核心概念就是把大家共用的狀態（資料）抽出來，放到一個全域性共用的倉庫裡，按照一定約定統一管理，讓狀態的變化可預測。這就有兩個關鍵點：

統一儲存：共用的狀態統一儲存，全域性共用。
可預測：共用的狀態不可隨意修改，需要按照約定的規則修改，才能監測狀態變更、通知更新。

1.2、Vuex簡介

Vuex 就是面向Vue的狀態管理元件，採用集中式儲存+管理應用的所有共用狀態。Vuex只能在Vue中使用，深度使用了Vue的能力，如用Vue來實現state的響應式特性。

Vue2.* 版本 ▶ 對應 Vuex3.* 版本，Vuex3.* 中文檔案
Vue3.* 版本 ▶ 對應 Vuex4.* 版本，Vuex4.* 中文檔案

簡單來說，就是Vuex有一個全域性公共的store（類似Vue裡的data），作為公共資料倉儲，儲存了大家共用的狀態（資料）。這個資料倉儲store實現了資料響應、自動通知更新，這樣就很容易實現了各個元件間的資料通訊了。

其實，對於簡單的應用不一定需要Vuex，不過Vuex檔案並不大（gzip壓縮後10K左右）。

Vuex主要特點就是：單向資料流+單一資料來源。

state：儲存資料倉儲，類似Vue的data，也是響應式的，變更後會自動通知View。
views：元件檢視，就是使用state的Vue元件。
actions：更新state狀態，為了規範管理，state不能直接修改，必須通過action進行提交。Vuex中分為同步Mutation、和非同步Action。

02、安裝使用

通過<script>標籤直接參照vuex.js：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3/dist/vuex.js"></script>
// 註冊外掛
Vue.use(Vuex);

通過 vue-cli 腳手架搭建vue的開發框架，整合了vuex元件。
註冊外掛：Vue.use(Vuex)

偵錯已經被整合在了Vue的偵錯工具Devtools中了。

03、Vuex3入門

3.1、Vuex選項&範例

Store構造器選項	描述
state	Vuex store 範例的根 state 物件
mutations	註冊 mutation，就是修改資料的方法，引數為`state`。不支援非同步，通過`store.commit(name)`呼叫
actions	註冊 action，引數為`context`，同`store`範例，但不是她。支援非同步，通過`store.dispatch(name)`呼叫
getters	註冊 getter，`{ [key: string]: Function }`，引數為`state`，定義、使用同計算屬性
modules	子模組的物件，分割管理store，{ key(moduleName) : {state, namespaced?, mutations?, actions? ... }}
strict	是否嚴格模式，預設false，true=嚴格模式下，任何 mutation 處理常式以外修改state 都會丟擲錯誤。

✅store範例屬性	描述
state	資料來源`state`根物件
getters	所有註冊的`getter`
✅store 實體方法
commit(name, arg?, options?)	提交 `mutation` 執行申請，`name`為`mutation`註冊的方法名
dispatch(name, arg?, options?)	提交 `action` 執行申請，`name`為`action`註冊的方法名
replaceState(state: Object)	替換 `store` 的根狀態，用於合併狀態，如載入持久化的`state`資料。
watch(fn, callback)	響應式地偵聽 fn 的返回值，當值改變時呼叫回撥函數
subscribe(handler, option?)	訂閱 store 的 mutation，每一個mutation執行完呼叫
subscribeAction(handler, option?)	訂閱 store 的 action
registerModule(path, module)	註冊一個動態模組
unregisterModule(path)	解除安裝一個動態模組
hasModule(path)	檢查模組是否以註冊
hotUpdate(newOptions: Object)	熱替換新的 action 和 mutation

const store = new Vuex.Store({
    strict:false,
    state: {  //定義資料結構-資料倉儲
        points: 1000,
        user: { id: '001', name: 'sam' }
    },
    mutations: {  //修改資料的方法
        setUser(state, obj) {
            state.user.id = obj.uid;
            state.user.name = obj.uname;
        },
    },
    actions: {  //修改資料的方法-非同步
        set(context, obj) { context.commit('setUser', obj) }
    },
    getters: {  //獲取資料的計算屬性
        userExist(state) { return state.user.id != ''; }
    }
})
//提交資料修改
store.commit('setUser',{uid:'007',uname:'zhangsan'});
console.log(store.state.user); //id : "007" name : "zhangsan"
console.log(store.getters.userExist); //true

3.2、Vuex核心流程

Vuex核心概念：