vue3實現響應式provide、inject

實現響應式provide、inject主要目的就是代替vuex，本人並不喜歡vuex，感覺比較繁瑣，理解不容易，每次封裝都要去官網看api和一些大神的文章。

剛好vue3中不建議使用vuex，提倡provide、inject，藉此更是讓我離vuex又遠了一步。

provide、inject：

我們先簡單的使用provide、inject

//如果是爲了替代vuex，那麼最好是在app.vue中進行聲明
import { defineComponent,provide } from "vue";
export default defineComponent({
  setup(){
    //此處定義了一個provide變量nameTest
    provide('nameTest','testName')
    return{
    }
  }
});

//app.vue子以及更下級組件
import { defineComponent,inject} from "vue";
需要注意的是inject只能在setup中使用，promise.then()中也是不可以使用的
export default defineComponent({
  setup(){
    //此處使用inject獲取nameTest
    let nameTest = inject('nameTest')
    return{
        nameTest
    }
  }
});

 響應式：

app.vue改爲：
let testName = ref('555555');//這裏可以使用ref或者是reactive使其爲一個響應式
provide('nameTest',testName);//這裏不能使用testName.value，不然inject監聽不到
//另外如果需要全局改變nameTest，還需要定義一個方法來進行處理，類似於vuex的mutation
provide('nameChangeTest',(data)=>{//此處可以接受參數，也可以不接受參數
      testName.value = data
})

app.vue子以及更下級組件沒有變化，還是按照原來的
如果需要改變數據：
let nameChangeTest = inject('nameChangeTest')

nameChangeTest('8888888888');

另外provide的定義並不能使用數據或者是對象進行多個的組合式的寫法，只能一個個的寫，如果真的需要組合式寫法，可以嘗試使用函數定義多個變量的方法。