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

Posted 2023-02-22

【中文标题】Vuex/Vuejs：在 vuex 存储中访问 localStorage

【英文标题】：Vuex/Vuejs: accessing localStorage within vuex store

【发布时间】：2018-11-10 09:52:19

【问题描述】：

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

【参考方案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>

【参考方案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)
    
  

【讨论】：

抱歉，我想我没有正确解释自己。基本上，使用 localStorage 设置和获取项目代码，我想以某种方式访问​​它并将其放置在我的 VUEX 存储部分中，以便当用户登录时，电子邮件会显示在导航中。如果你知道如何做到这一点，那将是非常有益的。再次抱歉，提前非常感谢！