如何在模板vue3

Question

我已经有一段时间没有与Vue合作过，现在我正在努力处理看起来很简单的事情。 我有一家商店，我打算在整个应用程序中保持状态。目前，我只有一个布尔属性

snap

我可以控制网格上的Divs的移动和调整大小。

抽象和实际商店的代码：

import { reactive, readonly } from 'vue';

export abstract class Store<T extends Object> {

    protected state: T;

    constructor(data: T) {
        this.state = reactive(data) as T;
    }

    public getState(): T {
        return readonly(this.state) as T;
    }

}

import { Store } from "./Store";

interface AppState extends Object {
    snap: boolean;
}

class AppStore extends Store<AppState> {

    constructor() {
        super({
            snap: true,
        });
    }

    public setSnap(snap: boolean) {
        this.state.snap = snap;
    }

}

export const appStore: AppStore = new AppStore();

在我的根组件中，我有一个计算值，因此可以在模板中使用：

const snap = computed({
    get() {
        appStore.getState().snap;
    },
    set(newValue: boolean) {
        appStore.setSnap(newValue);
    }
});

在模板中，我有一个简单的复选框：

<label for="snap">Snap to grid <input type="checkbox" id="snap" v-model="snap"></label>

使用它一旦我使用它，但是我将其设置为True在商店中，但是当我加载应用程序时，未检查复选框。 我想念什么？

Edit：

我现在添加了其他字段，但是它们有同样的问题。
示例代码（尽管我在控制台中遇到了一个奇怪的错误）：

play.vuejs.org

更简化了（您可以看到状态值是正确的，但是只有在检查并取消选中复选框后，值是同步的）：

play.vuejs.org

Answer 1

返回的单词:)。它运行良好，首次检查复选框

const snap = computed({
 get() {
    **return** appStore.getState().snap;
 },
 set(newValue: boolean) {
    appStore.setSnap(newValue);
 }