通过Vue.js 3实现增强的组合性和响应性。

Question

给定以下在Vue.js 3中的组合式 'useNumbers.js'，我希望组件中的 'numbers' 具有响应性。但是，在一个组件中添加新的值到 'numbers' 中并不会在第二个组件中反映出来。

useNumbers.js:

import { ref } from '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