vue的核心是數據驅動,所有數據變更的時機很重要,也就是watch的內容,一般是數據邏輯的操作。在使用vuex的項目中,我們在vuex中只是發請求、拿數據,在視圖中來進行邏輯的操作、數據的更新。
1.vuex的作用,vuex在我的理解是這樣的
我們把多個組件的共用數據放在vuex這個容器中,在視圖中我們用過import引入這個state數據或者action方法,我們就拿到了vuex中的數據,有了數據我們在視圖中,可以讀取這些數據,但是不能更改,vuex中的數據只能在mutation中更改,如果在視圖中更改,vue會發出警告,我一開始覺得不方便,但是其實如果大家都可以在視圖找那個更改vuex的公共數據,那么數據就會變得混亂,vuex這樣做確實是很合理的。
舉個例子,我們想請求一個數組,我們把這個請求數組的方法寫在actions中並用export 來暴露這個方法,我們在視圖中(vue 文件)中引入,給一個按鈕加監聽,調用這個方法,這個方法在actions中執行,在actions中返回數據,我們根據返回的狀態碼進行判斷成功失敗。我們在action是的回調中執行dispath或者commit,把返回的數據提交到對應的mutation中,我們在index中定義state並暴露,在mutation中引入state,這樣在mutation中我們把action中傳過來的數據,賦值給state,最后我們在視圖中引入index.js,我們就這樣拿到了請求的數據。這個過程就是這樣
vue視圖請求-->(action-->mutation-->getter)-->index.js ---> vue視圖拿到數據。
2.關於watch數據
拿到數據就可以了嗎?當然不是我們要對數據進行處理,我們在舉個例子,假如我們拿到數據后,我們要把這個數組賦值給data中的arr數組,並且打印出數組的長度,那么我們怎么知道拿到數據了呢?我們需要對拿到的vuex中的數據進行watch,我們來判斷只要這個數據改變,我們就把數組賦值,並且打印數據。
我們打印成功了數據,但是我們再次點擊按鈕,為什么數據不打印了呢?arr的值是對的,但是不打印arr的length了,因為我們watch的值並沒有發生改變,因為兩次返回的值是相同的,所有我們會在每次請求前,調用一個request方法,來把我們監聽的數據重置,當然這樣我們打印了兩次,所以我們數據邏輯怎么寫要看具體情況。