Почему значение в composables не реактивно?

Question

[Jussss92]

Привет.
Я написал примитивную composables функцию.

import { ref } from 'vue'

export default function useVariablesSelectedMenu() {
	const totalActive = ref(0)

	// Функция для обновления переменной
	const setColumnActivePages = (newValue: number) => {
		totalActive.value++
	}

	return {
		setColumnActivePages,
		totalActive,
	}
}

Далее в компоненте я импортирую данную функцию и вывожу значение totalActive в template

import useVariablesSelectedMenu from '../composables/selectedMenu'
const { totalActive } = useVariablesSelectedMenu()

Оборачивал возвращаемое значение в toRefs, но оно все равно не реактивно.
В другом компоненте я вызываю метод setColumnActivePages там все отрабатывает значение увеличивается, но не в компоненте где использую totalActive

Comments

[Андрей]

То есть вы в одном компоненте изменяете значение, а в другом хотите следить за изменениями?

[Jussss92]

Андрей, Ну да. Именно для этого ведь и создавались компособл функции

[Андрей]

Jussss92, не совсем, из документации

In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.

Их придумали для удобного переиспользования кода, использующего реактивные примитивы, а вы пытаетесь использовать это для глобального состояния. В принципе, так можно делать, но работать это будет не везде, например с SSR от этого будет течь память. Если у вас просто SPA, то достаточно вынести ref из функции

import { ref } from 'vue'

const totalActive = ref(0)

export default function useVariablesSelectedMenu() {
	// Функция для обновления переменной
	const setColumnActivePages = (newValue: number) => {
		totalActive.value++
	}

	return {
		setColumnActivePages,
		totalActive,
	}
}

[Андрей]

Jussss92, если нужно прокинуть состояние между компонентами, то все же лучше сделать это через один из других вариантов: props, provide/inject, pinia

[Jussss92]

Андрей, Спасибо. Это помогло

Answer 1

[Чипекве]

Потому что в каждом компоненте при вызове useVariablesSelectedMenu создаётся своя независимая реактивная переменная totalActive.

Если нужно глобальное состояние, то totalActive нужно вынести за пределы useVariablesSelectedMenu и экспортировать отдельно.

Тогда везде, где используется useVariablesSelectedMenu, значение totalActive будет реактивным и одинаковым.