在vue框架的设计中,依赖注入并不是响应式的。即使是有很多人包括我自己也希望它是。
可以使用data()方法或者Vue.observable创建一个响应式对象,这样在使用依赖注入的时候也是响应式的。
export default {
provide() {
return {
reactive: this.reactive
};
},
data() {
return {
reactive: {
value: "Hello there"
}
};
}
};
现在,当reactive被注入到其他组件的时候,它将被表现成为一种属性,并且reactive进行改变的时候,在你的vue应用中将会触发updates。
vue 2.6介绍了observable方法,让我们创建自己的响应式对象。
import Vue from 'vue';
const state = Vue.observable({ message: "Hello!" });
事实上,这就是一样的方法。只是在vue内部中使用了data()方法而已。但是这样可以显式的暴露给我们,以便我们随时随地的使用它。
在Vue3中,这个方法被重新命名为reactive,Composition API有介绍。
让我们使用Vue.observable来重写先前的例子:
import Vue from 'vue';
const reactive = Vue.observable({ value: 'Hello there' });
export default {
provide() {
return {
reactive: reactive,
};
},
};
这个方法给了我们很大的灵活性让我们去创建响应式对象,因为我们不在依赖data()方法去创建。
有两种方式供你使用此插件进行响应式依赖注入对象的创建
装载插件
import Vue from 'vue';
import ReactiveProvide from 'vue-reactive-provide';
Vue.use(ReactiveProvide);
假如使用了脚手架,应该在main.js文件使用。
在组件中,你想注入一个值,你应该使用reactiveProvide 去创建:
export default {
reactiveProvide: {
name: 'injectedName',
include: ['reactive'],
}
data() {
return {
reactive: 'hello',
};
},
};
你应该给你的响应式对象命名即name值不能为空,这样我们就知道是哪个值被注入到后代中。使用include 数组,可以放置一系列的注入对象。
接受注入对象到组件中,直接设置命名的name即可。
export default {
inject: ['injectedName']
};
import { ReactiveProvideMixin } from 'vue-reactive-provide'
export default {
mixins: [
ReactiveProvideMixin({
name: 'injectedName',
include: ['reactive'],
})
],
data() {
return {
reactive: 'hello',
};
},
};
在一般的开发中,你都应该避免使用依赖注入,使用props 和 events 去传递数据。
这样就避免了必要的复杂性,保持代码的简洁,更容易被理解。
然而,在一些特殊的情况下,当使用依赖注入的时候,你应该问自己是否满足以下条件:
原文: https://blog.logrocket.com/how-to-make-provide-inject-reactive/