Level 29
You want to be able to update it from the front end (client) or from the back end (server)?
Jan 31, 2024
3
Level 1
How to reactively update shared inertia data?
I'm using inertia with Vue3 and I want to build an incognito toggle that hides sensitive data.
When I search for using Pinia with Inertia I find "That's where the HandleInertiaRequests is for". I'm wondering how I would deal with reactivity?
I think about using a session in HandleInertiaRequests
protected function share(Request $request)
{
return array_merge(parent::share($request), [
'isIncognito' => session('isIncognito', false),
]);
}
so I could use
<div :class="{ 'blur': $page.props.isIncognito }">
sensitiver Inhalt
</div>
But how would I use a toggle to update the global state reactively?
Level 1
@gych from the client side
Level 29
@pharmonie You can update a global shared prop from client side
See this code as an example of how you could do it:
<script setup>
import { usePage } from "@inertiajs/vue3";
/* This method is to toggle the value from true to false and vice versa */
const toggle = () => {
usePage().props.isIncognito = !usePage().props.isIncognito;
};
</script>
Please or to participate in this conversation.