Vue点击按钮修改变量并通过localStorage初始化的computed使用问题

• 你的isGrid计算属性仅定义了get读取方法，未定义set写入方法，属于只读属性，直接执行this.isGrid = true赋值操作不会生效，Vue控制台会抛出对应警告。
• localStorage仅支持存储字符串类型数据，直接存入布尔值true/false会被自动转为"true"/"false"字符串，读取时需要做类型转换才能拿到布尔值，避免后续逻辑判断出现类型异常。

1. 调整isGrid计算属性定义 #

给isGrid补全set方法，同时在get方法内处理类型转换：

computed: {
  // 其余原有计算属性保持不变
  isGrid: {
    get() {
      // 读取localStorage后转布尔值，默认值可根据自身需求修改
      const storedVal = localStorage.getItem('isGrid')
      return storedVal ? storedVal === 'true' : false
    },
    set(newVal) {
      // 赋值时自动同步到localStorage，转成字符串存储
      localStorage.setItem('isGrid', String(newVal))
    }
  },
}

2. 简化testing点击方法 #

计算属性的set已经处理了localStorage同步逻辑，点击方法只需要直接修改计算属性即可：

methods: {
  testing() {
    this.isGrid = !this.isGrid
    // 以下调试代码按需保留即可
    console.log('当前isGrid值：', this.isGrid)
    console.log('localStorage存储值：', localStorage.getItem('isGrid'))
  }
}

内容的提问来源于stack exchange，提问作者Arshavin123