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了。