How can I implement data persistence in a Nuxt.js application?

How can I implement data persistence in a Nuxt.js application?

You can use Vuex for state management and localStorage for data persistence in Nuxt.js. Would you like a code example?

Yes, please provide a code example for using Vuex with localStorage.

Sure! First, create a Vuex store and then use the localStorage API to save and retrieve data. Here's a simple example:

// store/index.js
export const state = () => ({
  myData: ''
});

export const mutations = {
  setData(state, data) {
    state.myData = data;
    localStorage.setItem('myData', data);
  }
};

export const actions = {
  nuxtServerInit({ commit }) {
    const data = localStorage.getItem('myData');
    if (data) {
      commit('setData', data);
    }
  }
};

This will persist myData across page reloads.

What if I want to clear the data from localStorage?

You can create a mutation to clear the data and remove it from localStorage like this:

clearData(state) {
  state.myData = '';
  localStorage.removeItem('myData');
}