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 存储/访问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，请使用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)
    }
  }
}