Vuex / Vuejs：在vuex存储中访问localStorage

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来存储/访问 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);
    },
  },
};

不需要@ChainList 的回答中提到的 init 操作，除非您想要有条件或延迟的初始化。

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

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

使用变种来设置您的存储状态和区域设置存储。引导应用程序时，调用商店操作来初始化您的商店。在您的突变中，代码应类似于以下内容。

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