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?

gych

2 years ago

Level 29

You want to be able to update it from the front end (client) or from the back end (server)?

pharmonie

2 years ago

Level 1

@gych from the client side

gych

2 years ago

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.