Vue 3: Bagaimana untuk mendapatkan dan mengubah suai set pembolehubah dalam fungsi komponen

Question

Pertimbangkan contoh mudah berikut menggunakan API komposisi dalam Vue 3. Saya mahu menggunakan contoh test dalam fungsi komponen.

<script>
import { defineComponent, ref, onMounted } daripada 'vue'

eksport lalai defineComponent({
  nama: 'Ujian',
  persediaan(){
    biarkan ujian = ref()
    
    onMounted(() => {
      lakukan sesuatu()
    })

    kembali{
      ujian,
      lakukan sesuatu
    }
  }
})

fungsi doSomething(){
  console.log(ujian) //<-- tidak ditentukan
  console.log(this.test) //<-- undefined
}
</script>

Bagaimana untuk mengakses test di dalam doSomething()? Pemahaman saya ialah apa-apa yang dikembalikan oleh setup() harus tersedia di seluruh komponen, sama seperti atribut data()

Answer 1

Anda mesti lulus ref sebagai parameter

<script>
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  name: 'Test',
  setup () {
    let test = ref(null)

    onMounted(() => {
      doSomething(test.value)
    })

    return {
      test,
      doSomething
    }
  }
})

function doSomething (param) {
  console.log(param); // null
}
</script>

---

Kaedah lain:

// functions.js
import { ref } from 'vue'
export let test = ref(null)

// vue-file
<script>
import { defineComponent, ref, onMounted } from 'vue'
import { test } from '../utils/functions.js'

export default defineComponent({
  name: 'Test',
  setup () {

    onMounted(() => {
      doSomething(test)
    })

    return {
      test,
      doSomething
    }
  }
})

function doSomething (param) {
  console.log(test.value); // <-- instant access
  console.log(param.value); // <-- import via parameter
}
</script>