javascript - Vuex/Vuejs : accessing localStorage within vuex store

Question

我正在使用 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))
}

Answer 1

使用 localStorage 的示例与 Vuex存储/访问 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's answer 中提到的初始化操作，除非您想要有条件的或延迟的初始化。

考虑使用 sessionStorage在某些情况下。

访问 token使用 setter/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>