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的定义并不能使用数据或者是对象进行多个的组合式的写法，只能一个个的写，如果真的需要组合式写法，可以尝试使用函数定义多个变量的方法。