How to persist state in Nuxtjs using Vuex-persistedstate

Nuxt.js is a free and open source web application framework based on Vue.js, Node.js, Webpack and Babel.js. It uses Vues’ Vuex to manage state but for some reason Vuex does not persist the stored state.

Scenario

Consider a user visiting you Nuxt website. You wish that between interruptions of filling out the SignUp form they can have their data persisted on refreshing the page.

For Vuex-persistedstate you can either store the data on local storage or cookies. In this article we will use local storage to store our persisted state.

Tag along and lets dive right in😃

Step 1

Create your Nuxt app

npm init nuxt-app persist-state

cd into the project.

Step 2

Install Vuex-persistedstate using npm

npm install vuex-persistedstate

Step 3

Now lets add the plugin to nuxt.config.js inside plugins

// nuxt.config.js
plugins: [{ src: '~/plugins/persistedState.client.js' }]

Step 4

Create a plugins directory in your projects root folder.
Create a persistedState.client.js inside the plugins folder.

| -Root

| — — -plugins

| — — — -persistedState.client.js

Step 5

Created a vuex store inside you store

export const state = () => ({
  userName: null,
  persistUserName: false,
})
export const mutations = {
  updateUserName(state, payload) {
    state.userName = payload
  },
  updatePersistance(state, payload) {
    state.persistUserName = payload
  },
}
export const actions = {
  switchPersistanceState({ commit }, payload) {
    commit('updateUserName', payload)
    commit('updatePersistance', true)
  },
}

Step 6

Add the state you want to persist to local storage in our persistedState.client.js file

import createPersistedState from 'vuex-persistedstate'
export default ({ store }) => {
  createPersistedState({
    key: 'vuex',
    paths: ['userName'],
  })(store)
}

Step 7

Display the persisted state on our index.vue page

</template>
<div>
<div> {{ this.profile.username }} </div>
<button class=”primary-button” @click=”refreshPage”>Refresh</button></div>
</div>
</template>
<script>
import { mapState, mapActions } from “vuex”;
export default {
data() {
return {
profile: {
username: “”,
},
data: {
username: “Kim”,
},
};
},
computed: {
…mapState({
userName: “userName”,
}),
,
methods: {
…mapActions({ startPersistance: “startPersistance” }),
startPersistanceNow() {
this.startPersistance(this.data);
},
refreshPage() {
this.startPersistance(null);
window.location.reload();
this.startPersistance(this.data);
},
},
mounted() {
if (this.userName !== null) {
console.log(“Fetched from state!!”);
this.profile.username = this.userName.username;
} else {
console.log(“FAILED to fetch from state!!”);
this.startPersistanceNow(this.data);
}
},
};
</script>

We are all done…

To know it works, run you Nuxt app using the command

npm run dev

and you will see “Kim” displayed on your app. Change the name to something else and hit the Refresh button and your new persisted state should be the name you just entered.

To view your persisted data, open devtools on your browser and head over to the Application tab and click on Local Storage then on the link your app is running on like below.

That’s all for today happy coding fellow Nuxter.