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的書寫格式為:

 

 
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各核心概念的理解。

 

at last,如果需要傳遞參數到store里,請參考大神博客:http://www.cnblogs.com/nmxs/p/6677330.html

更多vuex傳值示例:http://www.cnblogs.com/fayin/p/6445385.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM