This is precisely how you should use it ;)
Jan 26, 2023
2
Level 3
Loading an initial state with Pinia
I'm very new to Inertia and Pinia and I'm wondering if I'm doing things correctly.
This is an SSR app and I want to load an initial state (shortlist.artists) into my Pinia store.
APP.JS
// ... import the usual stuff
import { createPinia } from 'pinia';
// Import my custom Pinia store
import { useShortlistStore } from '@/Stores/ShortlistStore.js'
createInertiaApp({
... // the usual stuff
setup({ el, App, props, plugin }) {
// IS THIS THE CORRECT WAY TO USE PINIA??
const app = createApp({ render: () => h(App, props) })
.use(plugin)
.use(createPinia())
.use(ZiggyVue, Ziggy)
.mount(el);
// IS THIS THE CORRECT WAY TO SET AN INITIAL STATE??
const shortlist = useShortlistStore();
shortlist.artists = props.initialPage.props.shortlist;
return app;
},
...// more stuff
});
SSR.JS
// ... import the usual stuff
import { createPinia } from 'pinia';
// Import my custom Pinia store (not sure if needed)
import { useShortlistStore } from '@/Stores/ShortlistStore.js'
createServer((page) =>
createInertiaApp({
... // the usual stuff
setup({ App, props, plugin }) {
return createSSRApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue, {
...page.props.ziggy,
location: new URL(page.props.ziggy.location),
})
.use(createPinia());
// IS THIS PART NEEDED IN SSR.JS?
const shortlist = useShortlistStore();
shortlist.artists = props.initialPage.props.shortlist;
},
})
);
props.initialPage.props.shortlist is provided by my HandleInertiaRequests Middleware.
This all works by the way, I'm just wondering if this approach will cause me issues down the line, or if there any negative implications for SSR. Thanks for any advice!
Please or to participate in this conversation.