类型"true"不能分配给类型"Ref<boolean>"

Question

我有以下代码：

<!-- App.vue -->
<template>
<button @click="login">Login</button>
</template>
<script lang="ts">
import { loggedIn } from '../state'
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
loggedIn,
}
},
methods: {
login() {
this.loggedIn = true
}
}
})
</script>

// state.ts
import { reactive, ref } from 'vue'
export const loggedIn = ref(true)

上面的代码有一个编译错误(显示在VS代码和vue-cli-service serve中(

TS2322: Type 'true' is not assignable to type 'Ref<boolean>'.
>  |             this.loggedIn = true

我很确定我应该这样做，所以我不确定为什么我会出错。我可以将代码更改为这样，错误就会消失：this.loggedIn.value = true但我很确定它不是应该这样工作的，我得到了这个运行时错误：

Cannot create property 'value' on boolean 'false'

为什么在我的原始代码中出现这个编译错误？

Answer 1

来源：https://codesandbox.io/s/sad-cdn-ok40d

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>

状态.ts

import { ref } from "vue";
export const loggedIn = () => ref(false);

Main.js

import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");

所以问题是，如果我们使用组合API，我们应该使用setup()方法来设置数据和方法。

由于ref使用.value来更改值，因此我们不需要reactive。

Reactive用于object值，它将添加一个Proxy来监视对象的键/值。

在这种情况下，我们应该使用参考