Early loading of data into stores #988
-
|
I'm migrating from Vuex to Pinia, and one thing I do in Vuex is load data into it before Vue has started. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
globalThis.whenDataLoaded = fetch('/api/operational-data/')
.then(response => response.json())
.then(json => json):
</script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
import { createApp } from 'vue';
import store from './store';
globalThis.whenDataLoaded.then(async (data) => {
await store.dispatch('app/loadOperationalData', data);
startApp();
});
function startApp() {
createApp(App).use(store).mount('#app');
}Is there any way to achieve this with Pinia? I'm going to try with plugins now, but it would be good to get some ideas. Thank you. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
I think you could accomplish this by booting up Pinia and the relevant store outside of Vue: import { createPinia } from 'pinia'
// Init our pinia instance
const pinia = createPinia()
const store = useStore(pinia) // pass the instance to our store, instead of inferring it from our Vue app
whenDataLoaded.then(data => {
store.$state = data // replace the store's state without our data
createApp(App).use(pinia).mount('#app')
})See also: https://pinia.vuejs.org/core-concepts/outside-component-usage.html |
Beta Was this translation helpful? Give feedback.
-
|
Works brilliantly, and is cleaner than a plugin. Thank you! |
Beta Was this translation helpful? Give feedback.
I think you could accomplish this by booting up Pinia and the relevant store outside of Vue:
See also: https://pinia.vuejs.org/core-concepts/outside-component-usage.html