vuex

在以前的學習中，都是經過父子組件進行傳參的，當多個組件依賴於同一狀態時，傳參的方法對於多層嵌套的組件將會很是繁瑣，而且對於兄弟組件間的狀態傳遞無能爲力。此時咱們就須要用到vuex了。Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式，它採用集中式存儲管理應用的全部組件的狀態，解決了組件之間同一狀態的共享問題，下面通個簡單的實例開演示具體使用操做。

建立項目

和以前同樣，使用腳手架快速搭建項目，在存放項目的位置打開命令行，

建立項目：vue init webpack-simple vue-vuex

下載依賴：npm install

運行項目：npm run dev

項目新建成功，進行下一步

完成項目結構

本次咱們要實現的功能是在一個組件中更改某個數據後，在其餘組件中該數據能隨之動態變化，因此咱們須要先完成基本項目結構。

既然是不一樣組件的跳轉，首先必需要安裝路由：只須要在項目的根目錄執行命令：npm  install  vue-router --save便可。

其次，新建組件和路由了，都是之前的知識，這裏就再也不重複了，具體的能夠下載文末的源碼查看。

  

引入vuex

一般狀況下，在大項目中，須要進行狀態管理的數據會不少，因此更好的辦法是新建一個文件專門用來存放這些須要管理的數據：

1，在項目根目錄執行vuex安裝命令：npm install vuex --save

2，在src目錄下新建一個vuex的文件夾，在vuex文件夾裏面新建一個store.js文件

3，在剛纔建立的store.js文件中引入vue  引入vuex 而且use vuex

 

使用vuex

在使用vuex的時候，就須要用到vuex的官方網站https://vuex.vuejs.org/zh/上面提到的一些vuex的核心概念，首先是vuex，被稱爲單一狀態數，主要是用來存儲數據的；其次是mutations，用於存放改變state裏面的數據的方法。具體以下所示：

1，在state中定義數據

2，在mutations裏面定義方法

3，實例化 Vuex.store並進行暴露。

組件中使用vuex

 首先不考慮組件中通訊，單獨在某個組件中使用vuex，例如在Home.vue這個組件中展現並更改數據。

1，須要引入store：import store from '../vuex/store.js';

2，註冊store

3，展現數據：{{this.$store.state.count}}

4，改變，在上面定義的改變方法是實現數據自增的效果，因此這裏的改變數據只是經過點擊事件來觸發 mutations 改變 state裏面的數據，須要注意的是，在官網上面提到在觸發方法的時候須要傳遞一個參數，方便方法中使用，這裏直接是自增，不要參數，就要傳遞一個空置過去，不能直接省略，不然會報錯。

  

實現了單組件的使用後，再來看一看不一樣組件間的數據共享。

在上面的基礎上，打開News.vue，操做步驟和上面是同樣，直接使用的時候，只須要前三步就能夠了，須要改變的時候，就須要經過一些方法來觸發 mutations 。

首先在首頁中改變計數爲5.

而後打開新聞頁面，會發現計數也是5.

繼續在新聞頁中增長計數爲10。

再回到首頁。

代碼下載：點這裏

模塊化

如今，咱們是將變量的定義和數據操做所有都放在了一個文件裏面了，老生常談的是，當項目變大，須要存儲的數據變多時，會不方便管理和維護，因此，須要模塊化處理數據。

目前，vuex文件夾下面的store.js裏面的內容以下：

如今在此基礎上進行改造。

1，首先，在vuex文件夾下面新建index.js和mutations.js兩個文件

 

2，而後，將以前store.js裏面的內容進行分割：index.js做爲入口文件，把咱們須要的文件 都引入裏面 ，注入並導出；store.js用來初始化和存儲數據，mutations.js用來操做數據。

 

3，接下來，修改使用方式，在上面的例子中，咱們是在須要使用的地方進行引入，每次須要操做三次。

 

如今，只須要在main.js中一次性引入  在須要使用的地方直接使用就能夠了。

 

數據持久化

vuex的做用是多組件共享數據和狀態，在上面咱們已經看到了它的一部分做用。如今存在的問題是，刷新以後，數據就會被清空。在上面的例子中，當咱們不停的點擊，把數據加的足夠大的時候，刷新瀏覽器，咱們會發現，數據回到了默認的初始值。這個影響不是很大，若是咱們使用這種方式記錄用戶的登陸狀態，刷新瀏覽器以後，登陸狀態丟失，用戶體驗就很是很差了，所以，須要將vuex和本地進行存儲，爲了便於演示，再添加一個數據，造成對比（添加和使用同第一個數據同樣）。

而後將存儲薪水的數據在本地進行存儲，主要是在隨數據進行操做的時候，及時更新本地存儲。

而後取數據的時候，從本地取。

如今來進行測試：

首先是操做兩個數據：

而後刷新瀏覽器：

這樣數據就不會由於刷新瀏覽器而丟失了。

代碼下載：點這裏