How can I use Vuex with LocalStorage in Vue 3?

How can I use Vuex with LocalStorage in Vue 3?

You can use Vuex with LocalStorage by creating a plugin that syncs your Vuex state with LocalStorage. Would you like a code example?

Yes, please provide a code example.

Sure! First, create a Vuex store and then add a plugin to sync state. Here's a simple example:

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      myData: ''
    };
  },
  mutations: {
    setData(state, data) {
      state.myData = data;
    }
  },
  plugins: [
    store => {
      store.subscribe((mutation, state) => {
        localStorage.setItem('myData', state.myData);
      });
      const savedData = localStorage.getItem('myData');
      if (savedData) {
        store.commit('setData', savedData);
      }
    }
  ]
});

This will sync myData with LocalStorage.

What if I want to use multiple state properties?

You can modify the plugin to handle multiple properties by subscribing to changes for each property you want to sync. Just repeat the localStorage.setItem for each state property.