方式二：使用npm來安裝，並在組件中使用import導入

npm install vuex --save
import Vue from 'vue';
import Vuex from 'vuex';
// 通過模塊倒入的話，還需要在模塊中顯式的安裝
Vue.use(Vuex);

02 vuex的組成結構示意圖

官方文檔裡面開篇就給出了一張介紹vuex的示意圖。通過這個圖，我們很容易就對vuex的組成部分，以及vuex與組件(components)之間的聯繫一目瞭然。

03 Vuex的原理和使用方法

數據單向流動

一個應用可以看作是由上面三部分組成: View, Actions,State,數據的流動也是從View => Actions => State =>View 以此達到數據的單向流動。但是項目較大的，組件嵌套過多的時候，多組件共享同一個State會在數據傳遞時出現很多問題。Vuex就是為了解決這些問題而產生的。

Vuex可以被看作項目中所有組件的數據中心，我們將所有組件中共享的State抽離出來，任何組件都可以訪問和操作我們的數據中心。

Vuex原理

可以很好的說明Vuex的組成，一個實例化的Vuex.Store由state，mutations和actions三個屬性組成：

state中保存著共有數據
改變state中的數據有且只有通過mutations中的方法，且mutations中的方法必須是同步的
如果要寫異步的方法，需要些在actions中，並通過commit到mutations中進行state中數據的更改。

少數派面試題

1、vuex是什麼？怎麼使用？哪種功能場景使用它？

Vuex是vue框架中的狀態管理插件。
在main.js引入store，注入。新建了一個目錄store，….. export 。
場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車

2、你對vuex的理解？

vuex可以理解為一種開發模式或框架。比如PHP有thinkphp，java有spring等。
通過狀態（數據源）集中管理驅動組件的變化（好比spring的IOC容器對bean進行集中管理）。
應用級的狀態集中放在store中；改變狀態的方式是提交mutations，這是個同步的事物；異步邏輯應該封裝在action中。

3、vuex有哪幾種屬性？

有五種，分別是 State、 Getter、Mutation 、Action、 Module

4、vuex的State特性是？

一、Vuex就是一個倉庫，倉庫裡面放了很多對象。其中state就是數據源存放地，對應於與一般Vue對象裡面的data
二、state裡面存放的數據是響應式的，Vue組件從store中讀取數據，若是store中的數據發生改變，依賴這個數據的組件也會發生更新
三、它通過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中

5、vuex的Getter特性是？

一、getters 可以對State進行計算操作，它就是Store的計算屬性
二、雖然在組件內也可以做計算屬性，但是getters 可以在多組件之間複用
三、如果一個狀態只在一個組件內使用，是可以不用getters

6、vuex的Mutation特性是？

一、Action 類似於 mutation，不同在於：
二、Action 提交的是 mutation，而不是直接變更狀態。

三、Action 可以包含任意異步操作

7、Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中？

一、如果請求來的數據是不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入vuex 的state裡。
二、如果被其他地方複用，這個很大幾率上是需要的，如果需要，請將請求放入action裡，方便複用，幷包裝成promise返回，在調用處用async await處理返回的數據。如果不要複用這個請求，那麼直接寫在vue文件裡很方便。

8、不用Vuex會帶來什麼問題？