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 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'

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

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>

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。

反应式用于object值-它将添加一个Proxy来监视对象的键/值。

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

类型“ true”不可分配给类型“ Ref <boolean>”

1 个答案: