首先vuex概念比較多,一定要搞懂里面的概念,可以參考官網Vuex2.0概念,我寫此文的目的是希望能對前端愛好者提供個參考,加深對vuex2.0各核心概念的理解。
廢話少說,直接上干貨。這是官網上的一個計數的實例。
先來起個項目。
第一步、下載安裝vue項目
打開git ,運行 npm install --global vue-cli 這是安裝vue的命令行(首次安裝需要運行這條命令,如果之前裝過vue-cli,這里就不需要再安裝了)
$ vue init webpack my-project(這里的my-project是你的工程名字,可以任意起)
$ cd my-project(進入my-project我的工程文件夾)
$ npm install(安裝package.json中依賴的工程源文件,如果是初學者,可以把eslint,router都禁止了)
$ npm run dev (運行此項目)
第二步、安裝Vuex
在基本的Vuex中首先要安裝vuex到項目中,詳情請看Vuex官網下載安裝。Vuex官方下載通道
這里我直接使用了NPM安裝下載的。方法很簡單,打開終端輸入npm install vuex -S
安裝完成后,來創建文件。創建好的文件目錄如下:
首先在Counter.vue中我們寫入視圖中要顯示的內容:
然后配置store.js
配置main.js
至此項目可以運行一下,看一下效果了
實例二、
然后我們來點逼格高一點的,把vuex文件中的內容拆開,寫成組件化的形式,以此來加深對vuex中核心概念(state,getters,mutations,actions,modules)的理解。為了區分,我又重新起了一個項目vuex-2-demo。
還是先看一下工程目錄:
然后來配置Counter.vue,
然后來看一下store的入口文件index.js
接下來是actions.js文件

接下來是mutations.js文件
傳遞參數時,mutations.js的書寫格式為:
下面是getters.js
好了,接下來是主文件main.js
到此所有的文件都已經配置完了,可以運行一下試試了,打開終端,輸入npm run dev
你會看到和第一個demo中同樣的效果。
好了,簡單的兩個vuex2.0 的小Demo已經完成了,這個例子適用初學者,當然也歡迎大神來糾察指正,本人熱衷於前端,歡迎前端愛好者一塊交流談論。
總結:
通過這兩個小例子,我已成功的配置了Vuex2.0,並成功的跑通了,加深了對Vuex2.0各核心概念的理解。
at last,如果需要傳遞參數到store里,請參考大神博客:http://www.cnblogs.com/nmxs/p/6677330.html
更多vuex傳值示例:http://www.cnblogs.com/fayin/p/6445385.html