Блог

У меня есть следующий код:

 <!-- 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, так и в from 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'
  

Почему я получаю эту ошибку компиляции в моем исходном коде?

Источник: 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");
  

Итак, дело в том, что если мы используем composition API, мы должны использовать setup() метод для настройки данных и методов.

Поскольку ref использует .value для изменения значения, нам это не нужно reactive .

Реактивный используется для object значений, которые он добавит Proxy , чтобы следить за ключом / значениями объекта.

В этом случае мы должны использовать ref .