使用 localStorage 后如何在 Vue 3 中重新渲染元素？

Question

在 Vue 3 中，基于计算属性的元素在使用 localStorage 后似乎不会重新呈现。

为了演示这一点，我们将创建一个包含两个复选框和文本输入字段的简单表单。选中两个复选框后，输入字段应变为只读。

<div id="app">
  <form>
    <label>
      Checkbox A
      <input type="checkbox" v-model="checkboxA" />
    </label>

    <label>
      Checkbox B
      <input type="checkbox" v-model="checkboxB" />
    </label>

    <input type="text" value="abcd" :readonly="isTextBoxReadOnly" />
  </form>
</div>

两个复选框绑定到数据属性，readonly 属性绑定到计算的属性。

const app = Vue.createApp({
    data() {
        return {
            checkboxA: false,
            checkboxB: false,
        }
    },
    computed: {
        isTextBoxReadOnly() {
            return ( this.checkboxA && this.checkboxB );
        },
    },
    mounted() {
        if (localStorage.checkboxA) {
            this.checkboxA = localStorage.checkboxA;
        }
        if (localStorage.checkboxB) {
            this.checkboxB = localStorage.checkboxB;
        }
    },
    watch: {
        checkboxA(newCheckboxA) {
            localStorage.checkboxA = newCheckboxA;
        },
        checkboxB(newCheckboxB) {
            localStorage.checkboxB = newCheckboxB;
        }
    }
})

注释掉 mounted() 和 watch: 部分，Vue 3 表现完美。但是，启用 localStorage 后，文本输入似乎无法与计算的属性相匹配。要看到这个，运行代码，选中两个框并取消选中它们；复选框值保存到 localStorage。然后刷新页面，虽然复选框已适当更新，但文本输入（基于计算的属性）没有；即使两个复选框都未选中，文本输入（错误地）是只读的。

我认为这种行为可能是因为 localStorage 不是反应性的。这种情况下的文本输入如何正确呈现？

Answer 1

这里的问题是 localStorage 将值存储为字符串 "true" 和 "false"，您需要在检索它们时将它们转换回布尔值，因为作为字符串，"true" 和 "false" 是真实的：

mounted() {
    if (localStorage.checkboxA) {
        this.checkboxA = localStorage.checkboxA === 'true';
    }
    if (localStorage.checkboxB) {
        this.checkboxB = localStorage.checkboxB === 'true';
    }
}

使用 localStorage 后如何在 Vue 3 中重新渲染元素？

How do you re-render an element in Vue 3 after using localStorage?

vuejs3