How does Laravel Splade manage state persistence across different pages

State Persistence with Splade

Splade uses Vue's built-in `keep-alive` component to remember the state of a page. This means that when you navigate to a new page and then use your browser's back button, the previous page will not lose its state.

By default, Splade remembers the state of up to 10 pages, but you can configure this in the plugin options of the `app.js` file:

javascript
createApp({ render: renderSpladeApp({ el }) })
  .use(SpladePlugin, {
    'max_keep_alive': 50,
  })
  .mount(el);

This ensures that your Vue components maintain their state as users navigate through your application, providing a seamless and responsive user experience.

Passing Data to Vue Components

Splade also makes it easy to pass data from your Blade templates to your Vue components. You can use the `@js` directive to pass data as props:

html
<Cart :products="@js($products)" />

Alternatively, you can use Splade's `Data` component as a wrapper around your Vue component to pass data:

html
<x-splade-data :default="$chart">
  <apexchart v-bind="data" />
</x-splade-data>

This allows you to easily share data between your Blade templates and your Vue components, without having to manually manage state or prop passing.

Using the `$splade` Global Variable

Splade also provides a global `$splade` variable that you can use to interact with the Splade core from within your Vue components. For example, you can use it to navigate to a different page:

javascript
export default {
  methods: {
    visitCheckout() {
      this.$splade.visit("/checkout");
    },
  },
};

If you're using the `setup` attribute on your `