透過Vue.js 3實現增強的組合性和響應性。

Question

給定以下在Vue.js 3中的組合式 'useNumbers.js'，我希望元件中的 'numbers' 具有響應性。但是，在一個元件中加入新的值到 'numbers' 中並不會在第二個元件中反映出來。

useNumbers.js:

import { ref } 從 'vue';

export default function() {
    const numbers = ref([1, 2, 3, 4, 5]);

    const addNumber = num => {
        numbers.value.push(num);
    }

    const filterNumber = minNum => {
        return numbers.value.filter(curNum => curNum >= minNum);
    }

    return { numbers, addNumber, filterNumber }
}

Component A:

<template>
    <div>
        <h1>Child component</h1>
        <p>{{ numbers }}</p>
        <button @click="addNumber(45)">Add 45</button>
        <div class="line"></div>
        <GrandChild />
    </div>
</template>


<script setup>

import useNumbers from '../composables/useNumbers';
import GrandChild from './GrandChild.vue';

const { numbers, addNumber } = useNumbers()

</script>

Component B:

<template>
    <div>
        <h1>GreatGrandChild component</h1>
        <p>{{ numbers }}</p>
        <div class="line"></div>
    </div>
</template>

<script setup>

import useNumbers from '../composables/useNumbers';

const { numbers } = useNumbers();

</script>

每當我在元件A中點擊按鈕（將45加入陣列），這個變化不會在元件B中反映出來。我知道，像解構賦值這樣的操作會導致丟失響應性。

const { numbers, addNumber } = useNumbers()

破壞了響應性。我嘗試使用toRef和toRefs進行了一些嘗試，但目前還沒有找到解決方案。

Answer 1

您的問題的主要原因是每次呼叫useNumbers函數時，都會建立一個新的numbers物件實例。因此，每個元件都有自己的numbers副本，這些副本在元件之間不共用。

使用store

Answer 2

為了在多個useNumbers實例之間保持相同的狀態，您可以將狀態提升到函數外部，這樣它只會被建立一次。

import { ref } from 'vue';

const numbers = ref([1, 2, 3, 4, 5]);

export default function() { 
  ...
  return { numbers }
}

Vue Playground example