Vue3 的資料狀態管理,provide inject、vuex、props | vuex prop
進入vue3後,多了一種跟react很像的資料管理方式provide/inject,和vuex相同的是他可以跨組件讀寫資料,但是和vuex不同的是跨組件的範圍僅限於provide註冊那一層的子組件。也就是說provide類似於props把資料傳入子組件,props只能傳一層,但provide可以下去好幾層都可以存取,官方概念圖如下: 可以看一下本人畫的粗淺示意圖,三種資料流的比較:(不要把它當成廣告啊!我自己第一次看也很像某種軟體工具廣告XD)provide/inject、vuex、props比較本文大綱provide/njectvuexprops/emit Provide/Inject這個新功能算是我覺得vue3最讓我...
進入 vue3 後,多了一種跟 react 很像的資料管理方式 provide / inject,和 vuex 相同的是他可以跨組件讀寫資料,但是和 vuex 不同的是跨組件的範圍僅限於 provide 註冊那一層的子組件。
也就是說 provide 類似於 props 把資料傳入子組件,props 只能傳一層,但 provide 可以下去好幾層都可以存取,官方概念圖如下:
可以看一下本人畫的粗淺示意圖,三種資料流的比較:(不要把它當成廣告啊!我自己第一次看也很像某種軟體工具廣告XD)
provide/inject、vuex、props比較 本文大綱 provide / njectvuexprops / emitProvide / Inject
這個新功能算是我覺得 vue3 最讓我覺得改得很好的地方,以前可能只是想多傳一層 props 到第二層或第三層 child component,我就必須寫到 vuex 裡面,但這樣檔案就被分開好遠,還要區分很多module來管理一個小功能的兩三個狀態,寫法很分散;不用 vuex 就是要 props 一層一層傳下去,這種地獄我就不願再提起了。
先來看看怎麼使用吧。
前情提要
我會有兩個 component ,一個叫做 grandpa.vue 好了哈哈,另一個叫做 me.vue,所以聰明的你就會知道中間其實還有一層 father.vue,但我們不會用到它,因為我們要把東西直接從 grandpa.vue 傳到 me.vue。
provide
首先要引入 vue 的 api,並且在setup()中使用:
import { provide } from "vue"; //... setup() { provide("name", "James"); };這樣我們就在 grandpa.vue 這層建立好 provide 了,provide 第一個丟進去的值就是你的 inject 等等要取出的名稱,取出來之後你就會得到 "Jame...