結合我近期做的一個小項目來介紹一下Vuex的使用！ --2020.12.29
Vuex的基本概念
01-1 Vuex的基本介紹
官方介紹：Vuex 是一個專為 Vue.js 應用程式開發的狀态管理模式。它采用集中式存儲管理應用的所有元件的狀态，并以相應的規則保證狀态以一種可預測的方式發生變化。Vuex 也內建到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀态快照導入導出等進階調試功能。
圖1 Vue調試工具
簡單了解：Vuex就是不同元件共享的一個資料倉庫，每個元件都可以讀取其中儲存的資料，同時也可以進行相關操作來改變其中的資料，進而根據資料的改變來進行視圖層的動态更新。
注意：元件的銷毀不會改變Vuex中的資料。
使用場景：例如使用者登入狀态、音樂播放狀态、購物車商品等
01-2 Vuex的運作流程
以下是官方給出的流程圖：
圖2 Vuex運作流程圖
從圖中可以看到主要有四個部分，分别是Vue元件、Actions、Mutations、State，這幾個部分作用如下：
- Vue元件：即我們應用中的各部分元件;
- State：存儲Vuex中的資料狀态;
- Mutations：對State中的資料狀态進行更改，隻能是同步操作;
- Actions：送出Mutations，可包含異步操作;
這幾個部分之間的操作邏輯接地氣一點來表述大概就是：
- Vue元件中某些操作來調用Actions裡面的方法(同時傳給它需要的參數)，或者直接調用Mutations(同時傳給它需要的參數)；
- Actions獲得參數後送出Mutations (同時傳給它需要的參數)；
- Mutations獲得參數後再來更改State中的資料狀态 ；
- State中資料變化會動态更新相應的元件視圖 ；
- 完成一次Vuex更新；
Vuex在項目中的使用
02-1 Vuex的使用流程及相關檔案
安裝Vuex
這個就不說了，直接在項目根目錄下執行：
建立Vuex的相關項目檔案
圖3 Vuex的檔案結構
其實隻有一個index.js也是可以的，這裡分開來這麼幾個部分是為了友善維護管理。下面分檔案介紹一下：
index.js--store執行個體的主要結構
state.js--資料狀态倉庫
mutation-types.js--常量替代mutation事件類型,可了解為把Mutations中的事件名定義為常量
mutations.js--根據actions傳入的參數更改state中資料狀态
actions.js--在元件中調用來送出Mutations，關于actions裡的異步操作我目前還是比較糊塗
以上為Vuex的相關狀态管理檔案，下面看如何在具體的元件中使用。
02-2 Vuex在具體元件中的使用
首先大概說一下登入功能實作邏輯：
- 點選登入按鈕，彈出登入框;
- 輸入賬号密碼，點選登入，根據相應接口發送網絡請求：如果成功則擷取使用者資訊以及使用者歌單資訊，失敗則彈出提示框;
- 請求成功則Vuex中會存儲正确的狀态資訊，相關元件會實時動态更新;
- 另外在設定元件裡面點選登出則又會調用登出的action，實作登出;
登入元件(login.vue)
template部分
script部分