vue全家桶-vuex
阿新 • • 發佈:2020-08-06
1、Vuex概述
Vuex是實現元件全域性資料管理的一種機制,可以方便的實現各個元件之間的資料共享問題
偷了一張圖
:
# 左邊的圖是沒有使用vuex的時候:
這個時候我們元件之間如果需要傳遞資料的話,那麼在模組多的情況下,傳遞關係錯綜複雜,難以維護。
# 右邊的圖是使用vuex的時候:
這個時候我們元件之間如果需要傳遞資料的話,那麼在不管模組多少,共享資料都是通過vuex的store來進行存取,這樣就統一管理了我們的共享資料,便於資料的管理和後期維護。
使用vuex的好處
:
# 1、能夠集中的管理元件之間的共享資料,易於開發和後期維護 # 2、vuex中儲存的資料都是響應式的,能夠實時保持資料與頁面的同步
什麼樣的資料適合存在vuex中
:
只有元件之間必須要共享的資料才適合存在vuex中,例如身份驗證的token,那麼這個就要存在vuex中,那麼例如一個表格的資料,那麼這種就不適合存在vuex中。
以前看過別人的部落格,我記得很清楚的一句話:**不要因為要用vuex而去用vuex**。
2、Vuex的配置
# 1、安裝vuex npm install vuex --save # 2、匯入vuex import Vuex from 'vuex'; # 3、使用vuex Vue.use(Vuex); # 4、建立Store物件 /* Vuex */ const store = new Vuex.Store({ state:{count: 0} // state中存放的就是共享的資料 }) # 5、將Store物件掛載到Vue例項上,那麼所有元件中就都可以使用Store物件 new Vue({ el: '#app', router, components: { App }, template: '<App/>', store:store }) 當然我們的store:store這個後面的可以忽略