I am using localStorage
to set and get items, which is placed within my javascript code in a .vue file. However, I would like to somehow access that storage and place it within my Vuex store section which is in another file, most preferably within the mutations.
If someone knows how to do this, please could you help? Below is the code of the localStorage that I am using.
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))
}
An example of using localStorage with Vuex to store/access 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 need for the init action mentioned in @ChainList's answer, unless you want conditional or delayed initialization.
Consider using sessionStorage in some cases.
To access the token
use 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>