4、什麼是vuex

1、關於vuex剛開始學習的時候對於裏面的不少名詞有很陌生。很難接受這個定義，下面這個連接很好很簡單通俗的解釋了什麼是vuex

我喜歡的vuex網址： https://zhuanlan.zhihu.com/p/24357762

2、vuex主要是vue用來存儲數據的，它能夠有效的實現更改數據時有使用vue頁面的數據實時更新，可是它有一個很大的缺點，就是由於vue是單頁應用因此當頁面刷新時vuex的數據隨之也被清空了，如何實現頁面被刷新而數據沒有被清空呢？

在講述以前你首先須要瞭解vuex的基本概念和使用方式，這裏再也不贅述，由於網上有不少資料，vue的官網也有很詳細的說明。 使用的時候有一點要記住：action，mutation，getter都必須是函數

解決方案：

在此處須要先封裝一下vuex,首先來看看封裝的文件格式：

 

從上圖中能夠清晰的看到vuex的結構，首先簡單的說一下各個文件的意義：

一、action.js 獨立出來vuex處理數據的文件，格式以下：

二、getter.js 獨立出來的vuex獲取數據的文件，格式以下：

 

三、 mutation-types.js 獨立出來的vuex更改數據和存儲數據的文件，此文件是mutation的參數申明文件，格式以下：

 

四、mutations.js 獨立出來是mutation文件，在這裏處理更改和存儲數據，將mutation-types在此處導入，格式以下：

 

五、大boss上場啦，接下來就要說封裝的關鍵點,index.js，先丟代碼：

六、在最外層的index.js裏面作了，初始化中間件的邏輯，代碼以下：

這裏借用官方文檔中對plugin進行說明，以下圖：

這樣寫以後在頁面獲取和存儲數據的方式是：