How can I implement persistent state in Vue 3?

How can I implement persistent state in Vue 3?

You can use localStorage or sessionStorage to persist state in Vue 3. Would you like a code example?

Yes, please provide a code example.

Sure! Here's a simple example using localStorage:

import { ref, watch } from 'vue';

const usePersistentState = (key, initialValue) => {
  const storedValue = localStorage.getItem(key);
  const state = ref(storedValue ? JSON.parse(storedValue) : initialValue);

  watch(state, (newValue) => {
    localStorage.setItem(key, JSON.stringify(newValue));
  });

  return state;
};

export default usePersistentState;

You can use this usePersistentState function in your components!

How do I use this function in a component?

You can use it like this:

import usePersistentState from './usePersistentState';

export default {
  setup() {
    const count = usePersistentState('count', 0);
    return { count };
  }
};

This will keep the count state persistent across page reloads.