vuex的使用

　　vue如今愈來愈火，不僅僅能夠寫簡單的小項目，也能夠寫大中型的項目。可是項目大了，項目之間的數據傳遞就會變得複雜，那麼問題來了？在一個大型項目中，多個組件要公用同一個或多個數據，咱們如何保證每一個組件獲取到的數據都是預期對的值呢？這就要用到vuex了。

　　學習同樣新的東西，個人學習思路通常有三步：

　　　　一、它是什麼？

　　　　二、它是作什麼的?

　　　　三、它有什麼用處？

　　下面，咱們就按照以上三點，來學習一下vuex。

　　1、vuex是什麼

　　　　vuex是一個專門爲vue.js設計的集中式狀態管理架構。若是不明白這句話，咱們作一個比喻，首先咱們設置一個情景：有一個村子，村子裏有5戶普通人家和一戶村長家，村長負責管理村子裏全部的糧食，每次有人家要吃飯，這家人都要先告訴村長，咱們此次須要吃多少斤，而後村長稱出等量的糧食交給要吃飯的這家人。這樣，村長隨時都知道村裏糧食有多少，可是，若是忽然又搬來了幾十戶人家，每家每次吃飯都要這樣村長會很麻煩，因此呢，村長就想出一個辦法，在村子裏建一個倉庫，把村子裏全部的糧食都放進倉庫裏，有哪家人要吃飯了，就本身到倉庫裏去取，這樣，村長就不用那麼累了。在這個例子裏，一個村子就是一個vue項目，村長就是項目的一個父組件，5戶普通人家就是5個子組件，他們吃的糧食就是組件之間共同的一個數據，那麼那個存放糧食的倉庫就是咱們所說的vuex架構。所謂的狀態天然就是公用數據的狀態了。簡言之就是把多個組件公用的數據放到一個公用的倉庫去管理，這樣說不知道會不會好理解一些。

　　2、vuex是作什麼的

　　　　就像上面的例子所描述的，vuex就是一個專門管理vue項目數據的一個架構，它的工做就是定義並初始化全部公用數據、定義對數據的同步和異步操做。若是有組件要使用這裏的數據，直接調用定義好的操做方法便可。

　　3、vuex有什麼用

　　　　以前咱們說若是項目較大，數據傳遞複雜的狀況下，咱們可使用vuex來贊成管理數據狀態。它的做用就是將項目的公用數據及對數據的操做封裝到一個單獨的管理器中，這個管理器只定義對數據有關的操做，不包含其餘任何與dom或與數據無關的代碼。因此從數據管理的角度來講，vuex使得數據管理更加方便明瞭，從使用數據的組件角度來講，也更方便快捷，若是想使用數據了，那麼我直接引入並調用vuex給定的操做方法，使程序代碼可讀性更強。

　　好，大致瞭解了vuex以後，咱們就要看看怎麼使用vuex吧！

　　第一步：安裝

　　　　npm install vuex --save

　　第二步：編輯內容

　　　　

　　　　以上目錄是我在一個項目中用到的，

　　　　　　state用於記錄state數據的狀態

　　　　　　mutations用於定義數據的同步操做

　　　　　　mutation-types用於映射mutation的操做， 存儲mtation操做的相關常量（名） 

　　　　　　gettesr用於獲取state中數據的狀態

　　　　　　actions用於定義對mutation的封裝或對數據的異步操做

　　　　　　index.js是vuex的入口文件，其餘操做文件都要在這裏引入，並賦值給store實例

　　　　　　

　　　　注意：這裏在引入vuex後必定要加入這句話：Vue.use('vuex')

　　　　　　

　　第三步：在main.js中引入：import store from './store'

　　　　　　而後掛在到vue實例上：

　　　　

 　　最後：使用

　　　　在組件中用vuex提供的語法糖mapActions，mapGetters，mapMutations等引入store方法並調用

　　vuex的使用到此就結束了，另外須要注意兩點：（一）vuex適用於中大型vue項目，小的項目，數據操做簡單的就不必使用vuex了

　　　　　　　　　　　　　　　　　　　　　　　（二）一個應用只能有一個store實例，這個store實例要統一管理應用全部公用的數據

 

好了，今天就寫這麼多，以上都是我在寫項目的時候本身的總結，若是有什麼不足之處還請各位大神指正，另外別忘記關注我哦，後續還有更多知識分享，謝謝