最近在研究Vuex2.0，搞了好幾天終於有點頭緒了。 首先vuex概念比較多，一定要搞懂裡面的概念，可以參考官網Vuex2.0概念，我寫此文的目的是希望能對前端愛好者提供個參考，加深對vuex2.0各核心概念的理解。 廢話少說，直接上乾貨。這是官網上的一個計數的實例。 先來起個項目。 第一步、下載安 ...
最近在研究Vuex2.0，搞了好幾天終於有點頭緒了。
首先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
下載安裝Vuex
安裝完成後，來創建文件。創建好的文件目錄如下：
現在的文件目錄是這樣
首先在Counter.vue中我們寫入視圖中要顯示的內容：
Counter.vue
然後配置store.js
store.js
配置main.js
main.js
至此項目可以運行一下，看一下效果了
運行成功
實例二、
然後我們來點逼格高一點的，把vuex文件中的內容拆開，寫成組件化的形式，以此來加深對vuex中核心概念（state，getters，mutations，actions，modules）的理解。為了區分，我又重新起了一個項目vuex-2-demo。
還是先看一下工程目錄：
vuex-2-demo工程目錄
然後來配置Counter.vue，
Counter.vue
然後來看一下store的入口文件index.js
index.js
接下來是actions.js文件
actions.js
接下來是mutations.js文件
mutations.js
下麵是getters.js
getters.js
好了，接下來是主文件main.js
main.js
到此所有的文件都已經配置完了，可以運行一下試試了，打開終端，輸入npm run dev
你會看到和第一個demo中同樣的效果。
運行成功圖
好了，簡單的兩個vuex2.0 的小Demo已經完成了，這個例子適用初學者，當然也歡迎大神來糾察指正，本人熱衷於前端，歡迎前端愛好者一塊交流談論。
總結：
通過這兩個小例子，我已成功的配置了Vuex2.0，併成功的跑通了，加深了對Vuex2.0各核心概念的理解。
學習過程中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！
