本文探讨了如何在VueJS应用中将元数据处理与应用程序主体分离，通过创建一个独立的vanilla JS服务来处理OpenGraph等元数据。作者建议在main.js中导入并提供这个服务，然后组件可以通过依赖注入来使用。这种方式使得元数据服务具有可移植性，并允许在不同组件或使用不同框架的项目中复用，同时也支持针对不同场景实施不同的处理策略。
Just to chime in here. I have read that VueJS wants nothing to do with the meta stuff so I would do such things outside of the "VueJS" realm.
Basically make a plain vanilla js service like below. Here you could add all the functions to handle the meta data stuff such as the Open Graph data.
meta.js
export setTitle(title) {
document.title = title
}
Now we can import the service in main and then provide it to any component in the app who wants it. I could even use my meta service in other projects too which use different frameworks like React or Angular. Portability is super cool!
main.js
import meta from './meta'
new Vue({
router,
render: h => h(App),
provide: {
meta: meta
}
}).$mount('#app')
Here the component injects the meta service it wants to use.
someView.vue
export default {
name: 'someView',
inject: ['meta'],
data: function() {
returns {
title: 'Cool title'
}
},
created: function() {
this.meta.setTitle(this.title);
}
}
This way the meta service is decoupled from the app because different parent components can provide different versions of the meta service. Now you can implement various strategies to see which one is right for you or even different strategies per component.
Basically the inject walks up the component hierarchy and takes the meta service from the first parent who provides it. As long as the meta service follows a proper interface, you're golden.
Decoupling with DI is super cool 😃
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
