我正在使用带有选项 api 的 vue3,如标题为 code 的部分所示。我将一个对象设置为商店。 storeTest.vue展示了`tore是如何实现的,在watch中它展示了我如何监听商店中发生的变化。
在运行时,尽管为
geojson
和 order
分配了值,但 watch 语句不会报告发生的任何更改。我希望分配给 geojson
和 order
的值将打印在控制台中,但没有显示任何内容。
为什么会出现这种情况以及如何解决?
代码:
StoreTest.setters.set({
geojson: this.#featureRecentlyRequestedProcessing.value.get(DigitizePolygonConstants.CONST_DIGITIZED_FEATURE_PROPERTY_GEOJSON.description),
order: this.#featureRecentlyRequestedProcessing.value.get(DigitizePolygonConstants.CONST_DIGITIZED_FEATURE_PROPERTY_GEOM_ORDER.description),
});
storeTest.vue:
<script>
import { reactive } from 'vue';
export default {
}
export const StoreTest = ({
state: reactive({
array: [],
}),
getters: {
get() {
return StoreTest.state.array;
},
},
setters: {
set(obj) {
StoreTest.state.array.push(obj);
},
},
actions: {
initialize() {
StoreTest.state.array = [];
},
}
});
</script>
观看:
created() {
console.log(verboseTag, 'created()');
this.$watch(this.refStoreTest.getters.get, (newVal, oldVal) => {
msg = JSON.stringify({msg: verboseTag + '@watch refStoreTest.getters.get()', newVal: newVal, oldVal: oldVal});
console.log(msg);
newVal = newVal.sort((a,b) => a.order-b.order);
this.refStroeRecentlyHoveredGeometriesProps.setters.set(newVal);
});
}
正如@EstusFlask和文档所指出的,
$watch
配置需要是第三个参数:
您的情况:
this.$watch(
// first arg
this.refStoreTest.getters.get,
// second arg
(newVal, oldVal) => {
console.log(
JSON.stringify(
{
msg: verboseTag + '@watch xcx refStoreTest.getters.get()',
newVal,
oldVal,
sorted: [...newVal].sort((a, b) => a.order - b.order)
},
null,
2
)
)
this.refStroeRecentlyHoveredGeometriesProps.setters.set(sorted)
},
// third arg
{ deep: true }
)
旁注:
msg = 'foo'
前面添加 const
(如果从未重新分配)或 let
(如果重新分配)。get
不会提供有关该值的上下文或使用信息,并且可能会使代码对于进入代码库的其他开发人员甚至您自己在几个月或几年后返回时更难以阅读。我之所以提到这一点,是因为这通常是面试官的一个无声的选择标准,即使没有明确规定。即使对于基本的测试功能,将它们命名为 test
、foo
或 logger
也将体现出更成熟的编码方法。