I'm having trouble getting over the finish line with implementing Pinia into my existing stack (Lareavel/Inertia/Vue/Vite)....
TL;DR; I want to configure Pinia so that the store is initialized by data passed to it from Inertia within app.js, preferably before components are mounted so data is there right from the beginning (so I don't have to wrap everything in computed because its value isn't immediately loaded)
I can see from Vue DevTools that the store is being initialized with the proper data, but I've tried implementing every way of referencing the data within the store I could find online, but I'm not getting any clear success.
Here's the current rundown of my environment:
HandleInertiaRequests.php contains:
...
public function share(Request $request):array{
return ['app'=>array_merge(
'admin'=>...
'csrf'=>...
'env'=>...
'errors'=>...
'jetstream'=>...
'settings'=>...
'status'=>...
'user'=>...
'ziggy'=>...
],
)];
...
My AppStore.js file:
import {defineStore} from 'pinia';
export const useAppStore=defineStore('app',{
getters:{
authenticated:()=>!this==null&& !this?.user==null,
administrator:()=>!this==null&& !this?.user==null&&this?.user?.id===1,
},
actions:{
init(props){this.$state=props;},
routeExists:(routeName)=>!this?.ziggy==null&&routeName in this?.ziggy?.routes,
}
});
Part of my app.js file includes:
createInertiaApp({
...
setup({el,App,props,plugin}){
let appCreated=createApp({render:()=>h(App,props)})
...
.use(createPinia())
...
const appStore=useAppStore();
/* Is it possible to call appStore.init() here so the store is initialized before mount? */
appCreated.mount(el);
appStore.init(props.initialPage.props.app);
return appCreated;
},
}).then();
My components that access the store include:
<script setup>
import {useAppStore} from 'AppStore.js';
const $=useAppStore();
</script>
My problem is that I cannot seem to properly access store values from outside the app... in Vue Devtools, $ shows up in the setup section (but doesn't have any stored data), and the store shows up as a separate section as a Pinia store (with the properly initialized data), if that makes sense... https://imgur.com/a/G7IE6vV
I initially played around with the state method inside the store (including trying both state method formats) but no matter what I did, the store in $ was never overridden with the proper data from Inertia, and would only show up properly in the Pinia section in Vue DevTools