分模塊簡單使用vuex


Vuex是一個狀態管理模式,專門為vue.js創造出來的。它可以集中管理存儲整個項目的所有組件的狀態,並根據相應的具體規則來改變狀態。所以,如果不是開發復雜的單頁面應用,是沒有必要使用vuex,簡單的store模式即可。(可以見官網)

下面直接開始具體怎么使用vuex(以最簡單的計數器做例子)。

1.下載

npm install vuex --save

2.項目中創建好store倉庫目錄

 將store分割為多個模塊,更好更清晰的管理自己的項目。每個module都有自己的state、mutation、action、getter。

3.創建store(index.js文件中)

 4.這個簡易的計數器只有加減兩種操作,那么來寫它對應的模塊的state和mutation

5.getter相當於是store的計算屬性,模塊里的state發生改變,getter也會對應發生改變。

6.全局注入store,保證每個組件都能用到。

7.在Counter.vue里使用vuex

8.效果:

點擊“加一”按鈕:可以看到count模塊的state中的data從0變為1,觸發了ADD方法

點擊“減一”按鈕,可以看到:data又變為0,觸發了DECREMENT方法

 

以上只是簡單的舉了個小例子,了解具體原理還是要看官網。現在可以根據你自己需要的場景來使用vuex了。


免責聲明!

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



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