Javascript TypeScript VueJS：使用具有计算属性的观察程序

我正在构建一个自定义组件，它允许我使用任意的

作为单选按钮。目前我的代码如下所示：

.电台部{
显示：内联块；
边界半径：5px；
边框：1px实心#000；
填充物：5px；
保证金：5px；
}
.已选择电台节目组{
盒影：0.10px rgba（255,255,0,0.5）；
边框：2倍实心#000；
}
从“Vue属性装饰器”导入{Vue，组件，道具，手表}；
@组成部分
导出默认类RadioDiv扩展Vue{
@支柱（
val！：字符串；
@支柱({
必填项：true
})
值！：字符串；
所选=假；
安装的（）{
this.selected=this.value==this.val；
}
@手表（“价值”）
onChange（）{
this.selected=this.value==this.val；
}
handleClick（e:MouseEvent）{
此.$emit（“输入”，此.val）；
}
}

为了利用这一点，我可以将其放入如下模板中：

政治派别
共和国的
错误答案

民主党人
错误答案

独立的
这些人很清楚发生了什么事

从“Vue属性装饰器”导入{Vue，Component，Watch}；
从“./components/RadioDiv.vue”导入RadioDiv；
@组成部分({
组件：{RadioDiv}
})
导出默认类配置文件扩展Vue{
政治党派=“独立”；
}

这正如预期的那样有效。我可以点击

s，它会切换所选的变量，并相应地更新变量

但现在我想把它和一个全球国家经理联系起来。因此，我没有使用局部

politicalParty

变量，而是使用计算的属性，如下所示：

从“Vue属性装饰器”导入{Vue，Component，Watch}；
从“./components/RadioDiv.vue”导入RadioDiv；
从“./globalState”导入globalState；
@组成部分({
组件：{RadioDiv}
})
导出默认类配置文件扩展Vue{
获得政治党派{
返回globalState.politicalParty；
}
集政治党（val）{
globalState.politicalParty=val；
}
}

将

console.log

语句放入setter中，我可以看到它正在被调用，并且变量正在更新。但是将

console.log

语句放在我的

value

watcher（在

RadioDiv

组件中）中，表明它不再被调用，因为我正在使用计算属性

现在我使用全局状态，让我的

RadioDiv

再次反应的秘密是什么

更新 这个问题似乎并不特定于我的自定义组件或观察者。我决定忽略这一点，在等待StackOverflow的回答时继续前进，并再次遇到了有关Quasar组件的问题：

...
{{ageText}}
...
...
获得年龄（）{
返回globalState.age；
}
设定年龄（val）{
globalState.age=val；
this.ageText=“您已”+val+“岁”；
}
...

这让我尝试不使用任何自定义组件：

...
文本：{{test}

...
设testVal=“”；
...
get test（）{return testVal；}
设置测试（val）{testVal=val；}
...

---

再一次：没有反应。当我对

v-model

使用computed属性时，调用

set

后，似乎没有任何变化。如果

globalState

只是一个

对象，那么它将不会是反应性的，因此
computed
只读取它的值一次。与
testVal
相同，它只是一个
字符串（本身也不是被动的）

要使
test
计算属性对
testVal
产生反应，请使用以下命令创建
testVal
：

const testVal=Vue.observable（{x:'}）
@组成部分
导出默认类配置文件扩展Vue{
get test（）{return testVal.x}
设置测试（val）{testVal.x=val}
}

类似地，对于
globalState
，导出
Vue.observable（）
将允许您的计算道具反应：

//globalState.js
导出默认Vue.observable({
政治党派：''
})