VueJS使实例属性具有反应性
VueJS使实例属性具有反应性
提问于 2018-02-09 10:52:20
我正在使用VueJS构建一个实例属性插件，我需要将一些反应性值带回到VueJS。
My searches :
我不明白Object.defineProperty()背后的内容，我寻找vuex getter初始化，因为我的逻辑是相似的，但我不知道如何正确运作。
简单示例:
下面是一个VueJS片段，附在他的原型main.js上：
Vue.prototype.$ajax = {
loading: false,
isLoading () {
return this.loading
}
}现在，从组件component.vue访问它：
export default {
computed: {
loading () {
return this.$ajax.isLoading()
}
},
created () {
let self = this
setInterval(() => {
console.log(this.loading, this.$ajax.isLoading())
}, 100)
setTimeout(() => {
this.$ajax.loading = true
}, 1000)
}
}
}示例结果:
在setTimeout之前，我们有false false (这是预期的输出)，但是在setTimeout之后，我们有false true ( getter不接收修改，但是直接访问器有值)。
有什么办法把反应性的东西带到我的$ajax.isLoading()里吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-09 11:40:15
好的，通过深入挖掘vuex代码，我找到了一个解决方案:在插件中使用一个Vue实例，并将您的数据放入其中，以便将反应性带到外部。
从问题中：
Vue.prototype.$ajax = {
_vm: new Vue({data: {
loading: false
}}),
setLoading (loading) {
this._vm.$data.loading = loading
},
isLoading () {
return this._vm.$data.loading
}
}我刚刚用这个设置器在我的组件上更改了直接访问器：
this.$ajax.setLoading(true)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48704234
复制相关文章
相似问题
腾讯云开发者
