Utilizing Local Storage in Vuex Store with Vue.js

Question

Utilizing Local Storage in Vuex Store with Vue.js

I have been working with localStorage for storing and retrieving items in my JavaScript code housed within a .vue file. However, I am now looking to find a way to transfer this stored data into my Vuex store, specifically within the mutations section located in another file.

If anyone has any insights or suggestions on how to achieve this, your help would be greatly appreciated. Provided below is the snippet of code showcasing how I am currently utilizing localStorage.

if(response.status === 200){
    console.log('TOKEN_SET', response)
    this.access_token = response.data.access_token
    localStorage.setItem(this.access_token, JSON.stringify(this.access_token));
};
mounted(){
    console.log('GOT_TOKEN')
    if(localStorage.getItem(this.access_token)) this.access_token = JSON.parse(localStorage.getItem(this.access_token))
}

javascript vue.js local-storage vuex mutation

Answer 1

Answer №1

Illustrative example showcasing the utilization of localStorage in conjunction with Vuex for storing and retrieving a token:

const store = { 
  state: {
      token: window.localStorage.getItem('token'),
  },

  mutations: {
    TOKEN: (state, value) => {
      state.token = value;
      window.localStorage.setItem('token', value);
    },
  },

  getters: {
    token: state => {
      return state.token;
    },
  },

  actions: {
    async fetchToken: ({commit}, value) => {
      const response = await fetch('/token');
      if (response.status !== 200) {
        throw new Error(`${response.status} error when fetching token!`);
      }
      const json = await response.json();
      commit('TOKEN', json.token);
    },
  },
};

No requirement for the mentioned init action as described in @ChainList's answer, unless there is a necessity for conditional or delayed initialization.

It could be beneficial to utilize sessionStorage in specific scenarios.

To retrieve the token, access it via the getter:

<template>
  <section class="profile">
    <img class="picture" src="profile.png"/>
    <span class="token">{{ token }}</span>
    <button class="fetch-token" @click="fetchToken">Fetch token</button>
  </section>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  computed: {
    ...mapGetters('token'),
  },
  methods: {
    ...mapActions('fetchToken'),
  },
};
</script>

Answer 2

Illustrative example showcasing the utilization of localStorage in conjunction with Vuex for storing and retrieving a token:

const store = { 
  state: {
      token: window.localStorage.getItem('token'),
  },

  mutations: {
    TOKEN: (state, value) => {
      state.token = value;
      window.localStorage.setItem('token', value);
    },
  },

  getters: {
    token: state => {
      return state.token;
    },
  },

  actions: {
    async fetchToken: ({commit}, value) => {
      const response = await fetch('/token');
      if (response.status !== 200) {
        throw new Error(`${response.status} error when fetching token!`);
      }
      const json = await response.json();
      commit('TOKEN', json.token);
    },
  },
};

No requirement for the mentioned init action as described in @ChainList's answer, unless there is a necessity for conditional or delayed initialization.

It could be beneficial to utilize sessionStorage in specific scenarios.

To retrieve the token, access it via the getter:

<template>
  <section class="profile">
    <img class="picture" src="profile.png"/>
    <span class="token">{{ token }}</span>
    <button class="fetch-token" @click="fetchToken">Fetch token</button>
  </section>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  computed: {
    ...mapGetters('token'),
  },
  methods: {
    ...mapActions('fetchToken'),
  },
};
</script>

Answer 3

Answer №2

Utilize mutation to update both your store state and local storage simultaneously. When starting up your application, invoke a store action to initialize your store. Here is an example of how the code should appear within your mutation.

{
  mutations: {
    SET_TOKEN (state, value) {
      state.token = JSON.parse(value)
      localStorage.setItem('token', JSON.stringify(token);
    } 
  },

  getters: {
    token (state) {
      return state.token
    }
  }

  actions: {
    init(store) {
       store.actions.setToken(store, JSON.parse(localStorage.getItem('token') || ''))
    },

    setToken(store, value) {
      store.commit('SET_TOKEN', value)
    }
  }
}

Answer 4

Utilize mutation to update both your store state and local storage simultaneously. When starting up your application, invoke a store action to initialize your store. Here is an example of how the code should appear within your mutation.

{
  mutations: {
    SET_TOKEN (state, value) {
      state.token = JSON.parse(value)
      localStorage.setItem('token', JSON.stringify(token);
    } 
  },

  getters: {
    token (state) {
      return state.token
    }
  }

  actions: {
    init(store) {
       store.actions.setToken(store, JSON.parse(localStorage.getItem('token') || ''))
    },

    setToken(store, value) {
      store.commit('SET_TOKEN', value)
    }
  }
}

Utilizing Local Storage in Vuex Store with Vue.js

Answer №1

Answer №2

Similar questions

What is the best way to include default text in my HTML input text field?

Retrieve information using server-side rendering

Unable to access a hyperlink, the URL simply disregards any parameters

Preserving scroll position during page navigation in Next.js

Transferring a zipped file between a Node.js server and a Node.js client

Tips for modifying the properties of variables within an array using JavaScript

Angular functions are executed twice upon being invoked within the html file

Error receiving parameter in express route callback function

Unable to find custom components when using react-router

Can you point me to the source of definition for Vue 2's ComponentDefinition and ComponentConstructor types?

A guide on organizing the visible items in a vue table

Identify the browser dimensions and implement CSS styling for all screen resolutions

Understanding image sizes for uploads on Tumblr can be a bit confusing, especially when comparing pages to posts. Learn how to implement lazyloading for post

Check to see if modifying the HTML using jQuery results in any errors

Rotate object within HTML table

Implementing automatic activation of a tab upon page load using Angular

Executing commands following a JSON loop in jQuery

How to access a namespaced getter from a Vue template using Vuex

JQuery UI Autocomplete: Results, Ctrl + A and Delete

How can I check if the VPN is turned off in a React application?