Tengo un componente en el que los valores se actualizan a partir de propiedades calculadas. He agregado un complemento nuxtServerInit para realizar una llamada de búsqueda en la creación de la aplicación nuxt y actualizar los valores. Pero de alguna manera, la promesa de búsqueda se resuelve después de que se ejecutan las propiedades calculadas y los valores de la tienda en este momento siempre están vacíos. ¿Cómo puedo asegurarme de que mis propiedades calculadas se actualicen solo después de que se resuelva la promesa? A continuación se muestran los archivos creados:

componente.vue

 <template> <select> <div v-for="(data, index) in dataList" :key="index"> <option :value="data.value">{{ data.label }}</option> </div> </select> </template> <script> import { allDataStore } from '@/store/allDataStore.js' export default { setup(){ const reqData = allDataStore() return { reqData } }, computed: { dataList() { console.log('inside computed dataList') return this.reqData }, } } </script>

nuxtServerInit.js

 import { allDataStore } from '@/store/allDataStore.js' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.hook('app:created', async () => { console.log('inside nuxtApp hook') const dataFetch = allDataStore() await dataFetch.fetchAllData() }) })

allDataStore.js

 import { defineStore } from 'pinia' export const masterDataStore = defineStore('masterDataStore', { state: () => ({ allData: {} }), getters: { getReqData: state => state.allData, }, actions: { fetchAllData (){ console.log('inside fetchAllData call') const newData = $fetch('url').then(res) => { console.log('data received') return res[0] } } } }

Actualmente, el código se ejecuta en el siguiente orden: 'dentro del gancho de nuxtApp' -> 'dentro de la llamada fetchAllData' -> 'dentro de la lista de datos calculada' -> console.log('datos recibidos')

Pero se necesita el siguiente orden: 'dentro del gancho nuxtApp' -> 'dentro de la llamada fetchAllData' -> console.log('datos recibidos') -> 'dentro de la lista de datos computados'