Vue.js 类型'；正确'；不可分配给类型'；参考<；布尔值>'；

我有以下代码：

登录
从“../state”导入{loggedIn}
从“vue”导入{defineComponent}
导出默认定义组件({
数据（）{
返回{
洛格丁，
}
},
方法：{
登录（）{
this.loggedIn=true
}
}
})

//state.ts
从“vue”导入{reactive，ref}
导出常数loggedIn=ref（真）

上面的代码有一个编译错误（在VS代码和from

vue cli服务中都显示了该错误）

为什么我的原始代码中会出现这种编译错误？
来源：

App.vue

<!-- App.vue -->
<template>
  <div>
    <button @click="login">Login</button>
    <div>{{ data }}</div>
  </div>
</template>
<script lang="ts">
import { loggedIn } from "./state";

export default {
  name: "App",
  setup() {
    const data = loggedIn();
    const login = () => (data.value = !data.value);
    return { data, login };
  },
};
</script>

Main.js

import { ref } from "vue";

export const loggedIn = () => ref(false);

从“vue”导入{createApp}；
从“/App.vue”导入应用程序；
createApp（App.mount（“#App”）；

所以问题是，如果我们使用CompositionAPI，我们应该使用
setup（）
方法来设置数据和方法

由于ref使用.value来更改值，因此我们不需要
反应式

Reactive用于
对象
值-它将添加一个
代理
，以监视对象的键/值

在这种情况下，我们应该使用ref.
来源：

App.vue

<!-- App.vue -->
<template>
  <div>
    <button @click="login">Login</button>
    <div>{{ data }}</div>
  </div>
</template>
<script lang="ts">
import { loggedIn } from "./state";

export default {
  name: "App",
  setup() {
    const data = loggedIn();
    const login = () => (data.value = !data.value);
    return { data, login };
  },
};
</script>

Main.js

import { ref } from "vue";

export const loggedIn = () => ref(false);

从“vue”导入{createApp}；
从“/App.vue”导入应用程序；
createApp（App.mount（“#App”）；

所以问题是，如果我们使用CompositionAPI，我们应该使用
setup（）
方法来设置数据和方法

由于ref使用.value来更改值，因此我们不需要
反应式

Reactive用于
对象
值-它将添加一个
代理
，以监视对象的键/值

在这种情况下，我们应该使用ref.
Try
loggedIn=ref（true）
希望这有助于感谢和感谢向上投票