如何在 vue 3 組件中使用普通 javascript 變量？

Question

我有一個帶有一些變量的javascript文件，我想在這樣的vue組件中使用它們：

<template>
  <div> Hello {{ personData.name }} {{ personData.last }} </div>
  <button @click="signOut"> Sign Out </button>
</template>

<script>
  import { personData } from '<path>'

  export default {
    ...

    methods: {
      signOut() {
        personData.signed_in = false;
      }
    }
  }
</script>

文件：

export var personData = {
  name: '<name>',
  last: '<last>',
  signed_in: true,
}

它說personData是未定義的，但顯然它不是，而且它被訪問但沒有在實例上定義。 我是Vue的新手，所以我不知道自己做錯了什么。 同樣重要的是它們是全局的而不是組件的一部分

頁面上什么也沒有出現

Answer 1

問題是，您正在導入一個變量並僅在 Vue 實例中使用它。 VueJS 必須知道哪些是反應性數據，以便它可以根據其值更新 DOM。 因此，您進行以下更改以使其工作：

<template>
  <div> Hello {{ personData.name }} {{ personData.last }} </div>
  <button @click="signOut"> Sign Out </button>
</template>

<script>
  import { personData } from './presonalData.js'
  export default {
    data () {
      return {
        personData  //register as reactive data
      } 
    },
    methods: {
      signOut() {
        personData.signed_in = false;
      }
    }
  }
</script>