天天看點

vue3 - vueX

 檢查下啊,基礎啊 不多說,希望讀者有腦子。

vue自動建立了 store 檔案夾,下面的index.js 是一個VueX的全局資料倉庫吧,可以這樣了解。

vue3 - vueX

我現在在state 添加 name 叫鹹瑜,那我在其他頁面或元件我可以這樣擷取到這個name :

vue3 - vueX
vue3 - vueX

就是這樣擷取即可。

 修改 state的值,嚴格執行,别問為什麼

這個 ??  是state的字元串,把它改為'鹹瑜'

vue3 - vueX

然後在store裡面接受這個動作:

vue3 - vueX
vue3 - vueX

就這樣,還有一種方法,如果你懶的話:

vue3 - vueX

 注意: 這個方法完全是可以的 但是!隻能對同步有效,即mutations裡面不能有異步操作,不然後果自負,雖然不報錯,但規矩就是規矩。是以說偷懶方法可以這樣,但隻能用于同步。

vueX的傳值,和隐含參數 (看代碼注釋即可)

例如,我點選 擷取Name ,修改的Name是我傳遞過去的參數,而且我要2S後在修改(用到異步) ,那麼就這樣寫:

vue3 - vueX
vue3 - vueX

注意看注釋

 總結:

dispatch 和 actions 做關聯

commit 和 mutation 做關聯

 setup 函數使用 VueX

vuex 提供了一個叫 useStore,直接引入,然後使用這個變量即可:

vue3 - vueX
vue3 - vueX

當然你也可以用 toRefs結構。
vue3 - vueX

 是以其他用法結合前面的也是那樣用即可。

子產品的話,這裡不說,其實就是分出很多個 store.有基礎的也不用看。