TypeScript项目使用litState报错：无法赋值只读属性'counter'

针对你遇到的Cannot assign to read only property 'counter' of object '#<DemoState>'错误，可通过以下步骤解决：

1. 调整TypeScript编译配置 #

在tsconfig.json中修改以下配置项，解决类字段与装饰器的兼容性问题：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "useDefineForClassFields": false,
    // 保留你的其他编译配置
  }
}

TypeScript默认开启useDefineForClassFields: true时，会将类属性标记为不可配置，与lit-state的@stateVar()装饰器的属性代理逻辑冲突，导致初始化阶段赋值失败。关闭该选项即可避免此问题。

2. 正确更新状态属性 #

@stateVar()装饰后的属性为只读属性，禁止直接在外部赋值（如demoState.counter = 1），需通过以下两种方式更新：

• 在状态类内部定义方法修改：

  import { LitState, stateVar } from 'lit-element-state';
  
  class MyState extends LitState {
    @stateVar() counter = 0;
  
    // 定义方法封装状态更新逻辑
    incrementCounter() {
      this.counter++;
    }
  }
  
  export const myState = new MyState();
  

  在组件中调用方法更新：

  myState.incrementCounter();
  

• 使用lit-state的set方法批量更新：

  myState.set({ counter: myState.counter + 1 });
  

3. 修正代码笔误（若存在） #

检查组件中导入的状态实例是否与状态文件导出的名称一致：你的状态文件导出myState，但组件代码中导入了demoState，这种命名不一致可能引发意外问题，建议统一命名。

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