Currently developing a Vue 3 application that utilizes Vuex and the Composition API.
Encountered an issue while working on it.
A component is supposed to display elements based on the state of two store variables. One is an array, and the other is a boolean. The array updates correctly, but the boolean does not.
Here's the code for the store:
export default {
state() {
return {
current: {
chat: {
them_writing: false,
texts: []
}
}
}
},
mutations: {
add_text_to_chat(state, text) {
state.current.chat.texts.push(text);
},
set_them_writing(state, v) {
state.current.chat.them_writing = v;
}
}
};
And here's the component code:
<template>
<div v-if="them_writing || shown.length">
<div class="text_wrapper" v-for="(text, index) in shown" :key="index">
<div class="text">
{{ text.content }}
</div>
</div>
<div class="text" v-if="them_writing">
<span>.</span>
<span>.</span>
<span>.</span>
</div>
</div>
</template>
<script setup>
import { inject, ref } from "vue";
let store = inject("$store");
const shown = ref(store.state.network.current.chat.texts);
const them_writing = ref(store.state.network.current.chat.them_writing);
</script>
<style scoped>
</style>
After calling the add_text_to_chat mutation, the elements list updates as expected.
However, when using set_them_writing with a new value, the UI doesn't reflect the change.
Since the first variable is reactive, I believe the issue lies elsewhere.
The code setting seems consistent, so why is just one value not updating? Any insights?