Vuex/Vuejs: vuex 스토어 내의 local Storage에 액세스

Vuex/Vuejs: vuex 스토어 내의 local Storage에 액세스

사용하고 있다localStorage.vue 파일의 javascript 코드 안에 있는 아이템을 설정 및 가져옵니다.다만, 어떻게든 그 스토리지에 액세스 해, 다른 파일에 있는 Vuex 스토어 섹션, 특히 돌연변이내에 배치하고 싶다고 생각하고 있습니다.

이 방법을 아는 사람이 있다면 도와주실 수 있나요?사용하고 있는 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))
}

vuex에서 localStorage를 사용하여 저장/액세스하는 예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);
    },
  },
};

조건부 또는 지연 초기화를 원하지 않는 한 @ChainList의 응답에 기재된 초기화 액션은 필요하지 않습니다.

경우에 따라 sessionStorage 사용을 고려해 보십시오.

에 액세스 하려면tokengetter 사용:

<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>

변환 기능을 사용하여 저장소 상태와 로케일 저장소를 설정합니다.응용 프로그램을 부팅할 때 스토어 액션을 호출하여 스토어를 초기화합니다.당신의 돌연변이의 코드는 다음과 같아야 합니다.

{
  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)
    }
  }
}

언급URL : https://stackoverflow.com/questions/50623359/vuex-vuejs-accessing-localstorage-within-vuex-store