In my Vue application, the structure is as follows: App.vue -GroupWrapper --GroupListing -PeopleWrapper --PeopleListing -ConversationWrapper
Within my user store that utilizes Pinia, I primarily call user.findChats() in the App.vue component.
Code snippet from App.vue:
import { useChatStore } from './stores/chat'
import { useUserStore } from './stores/user'
const chat = useChatStore()
const user = useUserStore()
chat.findChats();
This function finds all chats and categorizes them into either "dm" or "gm" type, storing them in respective arrays.
Snippet from chat.js:
import { defineStore } from 'pinia'
import { db } from '../firebase'
import { collection, query, where, getDocs } from 'firebase/firestore'
import { useUserStore } from './user'
export const useChatStore = defineStore('chat', {
state: () => ({
dm_chats: [],
gm_chats: [],
user: useUserStore(),
}),
actions: {
async findChats(id) {
// code to fetch chats from firestore and categorize them
}
}
})
The dm_chats array should be displayed using a v-for loop in PeopleListing component.
Snippet from PeopleWrapper.vue:
<script setup>
import peopleListing from './people-listing.vue'
import { useChatStore } from '../../stores/chat'
import { storeToRefs } from 'pinia';
const chat = useChatStore()
const { dm_chats: chats } = storeToRefs(chat)
</script>
<template>
<div>
Direct Chats
<peopleListing v-for="dm_chat in chats" :dm_chat="dm_chat" />
</div>
</template>
Similar approach is used for gm_chats in GroupListing. However, the issue arises when updating the arrays does not reflect on screen beyond the initial load from Firestore.
Tried solutions include:
- Merging both stores into one file
- Changing Pinia syntax from option to setup
- Using reactive in the array setup
- Trying computed instead of storeToRefs in both syntaxes
- Attempting $subscribe and vue watch methods
Despite various attempts, the issue persists. Any guidance on this matter would be greatly appreciated. Thank you!