Question

我正在使用localStorage来设置和获取项目，这些项目放在我的javascript代码中的.vue文件中。但是，我想以某种方式访问该存储并将其放在我的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

使用突变来设置商店状态和您的语言环境存储。启动应用程序时，请调用商店操作以初始化您的商店。代码在你的变异中应该如下所示。

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

Answer 2

使用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中提到的init操作。

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

要使用获取器访问token：

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

Vuex / Vuejs：访问vuex商店中的localStorage

2 个答案: