类型 'true' 不可分配给类型 'Ref<boolean>'答案

【问题标题】：Type 'true' is not assignable to type 'Ref<boolean>'类型 'true' 不可分配给类型 'Ref<boolean>'
【发布时间】：2020-10-16 13:41:17
【问题描述】：

我有以下代码：

<!-- 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 Code 和 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'

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

【问题讨论】：

试试loggedIn = ref<boolean>(true)
希望对您有所帮助并感谢您的支持

标签： vue.js visual-studio-code vuejs3

【解决方案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>

State.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 来监视对象的键/值。

在这种情况下，我们应该使用 ref。

【讨论】：