为什么我的手表不显示储值变化?

问题描述 投票:0回答:1

我正在使用带有选项 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); 
    });
}
vue.js vuejs3 vue-component store
1个回答
1
投票

正如@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 }
)

旁注:

  • 你有一个语法问题:在 JS 中,必须先声明变量,然后才能使用它们。这意味着您应该在
    msg = 'foo'
    前面添加
    const
    (如果从未重新分配)或
    let
    (如果重新分配)。
  • 命名很重要;命名 getter
    get
    不会提供有关该值的上下文或使用信息,并且可能会使代码对于进入代码库的其他开发人员甚至您自己在几个月或几年后返回时更难以阅读。我之所以提到这一点,是因为这通常是面试官的一个无声的选择标准,即使没有明确规定。即使对于基本的测试功能,将它们命名为
    test
    foo
    logger
    也将体现出更成熟的编码方法。
© www.soinside.com 2019 - 2024. All rights reserved.