How can I use LocalStorage with Vuex in Vue 3?

How can I use LocalStorage with Vuex in Vue 3?

You can use LocalStorage to persist Vuex state by subscribing to store mutations and saving the state to LocalStorage.

Can you show me a code example?

Sure! Here's a simple example:

import { createStore } from 'vuex';

const store = createStore({
  state: {
    myData: ''
  },
  mutations: {
    setData(state, data) {
      state.myData = data;
      localStorage.setItem('myData', data);
    }
  },
  actions: {
    loadData({ commit }) {
      const data = localStorage.getItem('myData');
      if (data) {
        commit('setData', data);
      }
    }
  }
});

store.dispatch('loadData');

What if I want to clear LocalStorage when the user logs out?

You can create a mutation to clear the LocalStorage when the user logs out. For example:

mutations: {
  logout(state) {
    state.myData = '';
    localStorage.removeItem('myData');
  }
}