当NewValue是相同的字符串时，如何解雇观察者？

Question

I'm inserting base64 images into an editor by assigning their base64 string to reactive object state.image and pointing a watcher at it.问题是，当我想两次插入相同的图像时，观察者不会发射。

Watcher ：

const renderImage = (editor) => {
    const unwatch = watch(() => state.image, () => {
        console.log('watcher fires!')
        editor.chain().focus().setImage({ src: state.image }).run()
        unwatch()
        state.image = null
    })
}

您可以看到我试图用 untatch（）杀死观察者，并另外set set state.image = null ，但加载相同的图像时仍不会发射。

@click 事件在此元素中触发：

<button  @click="$refs.image.click(); renderImage(editor)"></button>

<input type="file" ref="image" style="display: none" @change="getImageUrl">

图像的 dataUrl 均在 getimageurl 中创建：

const getImageUrl = (event) => {
    const files = event.target.files;
    if (!files.length)
        return;
    const reader = new FileReader();
    reader.onload = (event) => {
        state.image = event.target.result;
    };
    reader.readAsDataURL(files[0]);
}

这两个元素似乎都可以根据需要工作。

我该如何使观察者开火？

Answer 1

这个问题假设观看回调不是发射的，但是在这种情况下，实际上是＆lt; input＆gt; 没有发射事件。

＆lt; input＆gt; 仅触发更改/输入事件的值实际上更改。选择同一文件时，该值没有更改，因此没有更改 -event发生 getimageurl（）处理程序，该处理程序将触发观察文件加载时。

要解决问题，请重置＆lt; input＆gt; 的值，在复制所选文件的路径之后：

⋮
const image = ref() // template ref on input

const getImageUrl = (event) => {
    const files = event.target.files;
    if (!files.length)
        return;

    const fileToRead = files[0]; // 1️⃣ copy input's value
    image.value.value = null;    // 2️⃣ and reset the input
  
    const reader = new FileReader();
    reader.onload = (event) => {
        state.image = event.target.result;
    };
    reader.readAsDataURL(fileToRead);
}

demo 1

次要重构

renderimage（）实际上只是在使用观看基本上创建一个 fileReader 's load 事件的异步回调。似乎可以通过将图像渲染代码直接移动到 load -event处理程序中来简化这可以简化这一点：

const getImageUrl = (event) => {

    const files = event.target.files;

    if (!files.length)

        return;

    const fileToRead = files[0];

    image.value.value = null;
    const reader = new FileReader();

    reader.onload = (event) => {

        //