Компонент Vue.js обновляет одну переменную состояния хранилища и не обновляет другую. ⇐ Javascript

[Гость]

Я пишу приложение Vue 3, используя Vuex и Composition API.

Я столкнулся с такой проблемой.

Компонент отображает элементы в зависимости от состояния двух переменных состояния хранилища. Один из них — массив, а второй — логическое значение. Один обновляется правильно, а второй нет.

Код магазина:

экспортировать по умолчанию { состояние() { возвращаться { текущий: { чат: { их_письмо: ложь, тексты: [] } } } }, мутации: { add_text_to_chat (состояние, текст) { state.current.chat.texts.push(текст); }, set_them_writing (состояние, v) { state.current.chat.them_writing = v; } } }; Код компонента:

{{ текст.контент }} . . . импортировать {inject, ref} из "vue"; let store = inject("$store"); показана константа = ref(store.state.network.current.chat.texts); const them_writing = ref(store.state.network.current.chat.them_writing); Каждый раз, когда я добавляю текст с помощью мутации add_text_to_chat, список элементов обновляется правильно.

Однако, когда я вызываю set_them_writing с новым значением, пользовательский интерфейс не отражает изменения.

Поскольку первая переменная состояния является реактивной, я знаю, что это не настройка хранилища.

Настройки те же, но одно значение не соблюдено. Кто-нибудь может объяснить почему?