Achieve enhanced composition and responsiveness with Vue.js 3.

Question

Given the following combined 'useNumbers.js' in Vue.js 3, I want 'numbers' in the component to be responsive. However, adding a new value to 'numbers' in one component will not be reflected in the second component.

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>

Whenever I click the button in component A (adding 45 to the array), this change is not reflected in component B. I know that operations like destructuring assignment result in loss of responsiveness.

const { numbers, addNumber } = useNumbers()

Broken responsiveness. I've tried a few things using toRef and toRefs but haven't found a solution yet.

Answer 1

The main reason for your problem is that every time the useNumbers function is called, a new numbers object instance is created. Therefore, each component has its own copy of numbers, which are not shared between components.

Use store

Answer 2

To maintain the same state across multiple useNumbers instances, you can promote the state outside the function so that it is only created once.

import { ref } from 'vue';

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

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

Vue Playground example