Vue.js 如何使用变异在vuex中设置状态（并在重新加载后保持）？

我目前正在使用Vue.js/Vuex和Laravel PHP进行web应用程序的登录验证部分

成功身份验证后，我想从后端调用我的userObject（属性包括：email、role_id等），并在前端显示特定属性（navbar组件）

我已经检查了localStorage，并且userObject存储在那里，但是它似乎没有提交到我的存储（currentUser）（vue开发工具显示currentUser{}为空）

以下是我的代码：

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import Api from './_services/Api.js';

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    currentUser: {},
  },
  mutations: {

    SET_CURRENT_USER(state, user) {
      state.currentUser = user;
      window.localStorage.currentUser = JSON.stringify(user);
    },
    LOGOUT_USER(state) {
      state.currentUser = {}
      window.localStorage.currentUser = JSON.stringify({});
    }
  },
  actions: {
    logoutUser({commit}) {
      commit('LOGOUT_USER')
    },
    async loginUser({commit}, loginInfo) { //store.js
      console.log(loginInfo)

      try {

      let response = await Api().post('/login', loginInfo);
      console.log(response)

      let user = response.data.user;
      console.log(user)

      commit('SET_CURRENT_USER', user);
      console.log(JSON.parse(window.localStorage.currentUser));
      return user;


    } catch {

      return {error: "Email / Password combination was incorrect or unrecognized by the system. Please try again."}

    }


    }
  }
})

导航栏.vue

活动
{{currentUser.name+'，'+currentUser.email}
退出到应用程序
注销
从“axios”导入axios
从“vuex”导入{mapState}；
导出默认值{
数据（）{
返回{
}
},
方法：{
注销用户（）{
此.$store.dispatch（“注销用户”）；
}
},
计算：{
…映射状态（['currentUser']）
}
};

我尝试显式地将数据放入store.js中的currentUser{}

currentUser{name:'Test'，email:'test@mail.com“}

并且它成功地显示在导航栏中

这使我得出这样的结论：我无法成功地将userObject从“user”放置到“currentUser{}”，或者更确切地说，它在重新加载后不会持久

---

谢谢大家!

是的，

$store.*

不会在重新加载时保持不变，请查看如何处理，但这实际上取决于您如何使用API进行身份验证，vuex存储只是一个常规JavaScript对象。有多少人认为vuex是持久存储，这让我感到惊讶。如果您想在页面加载中持久化某些内容，则需要使用某种形式的持久存储–cookie（客户端）或数据库（服务器端）。我使用数据库（mySQL、PHP Laravel后端）在服务器端存储数据。我的身份验证方法是通过jwt（我通过email/pass组合成功地从服务器获得了jwt身份验证）。服务器向我发回两个对象：token和userObject（包含email、name等属性）。我将userObject存储在“currentUser{}”中，尽管它在vuex中似乎不持久，但在localStorage中仍然可用。我如何能够频繁调用localStorage，使其在重新加载时保持不变？是的，

$store.

不会在重新加载时保持不变，请查看如何处理该问题，但这实际上取决于您如何使用API进行身份验证，vuex store只是一个常规JavaScript对象。有多少人认为vuex是持久存储，这让我感到惊讶。如果您想在页面加载中持久化某些内容，则需要使用某种形式的持久存储–cookie（客户端）或数据库（服务器端）。我使用数据库（mySQL、PHP Laravel后端）在服务器端存储数据。我的身份验证方法是通过jwt（我通过email/pass组合成功地从服务器获得了jwt身份验证）。服务器向我发回两个对象：token和userObject（包含email、name等属性）。我将userObject存储在“currentUser{}”中，尽管它在vuex中似乎不持久，但在localStorage中仍然可用。如何能够频繁调用localStorage，使其在重新加载时保持不变？

<template>
    <nav>
<v-toolbar app :fixed="toolbar.fixed" :clipped-left="toolbar.clippedLeft" color="black">
<v-toolbar-side-icon class= "white--text" @click.stop="toggleMiniDrawer"></v-toolbar-side-icon>
<v-toolbar-title class="text-uppercase white--text" >
<v-btn flat to="/dashboard">
  <h1 class="font-weight-black display-1 white--text" >Activities</h1>

</v-btn>
</v-toolbar-title>
<v-spacer></v-spacer>
<h1 class="font-weight-regular title white--text">{{currentUser.name + ', ' + currentUser.email}}</h1>
</v-toolbar>

<v-list-tile @click="logoutUser">
    <v-list-tile-action>
      <v-icon class="black--text">exit_to_app</v-icon>
         </v-list-tile-action>
        <v-list-tile-content >
        <v-list-tile-title class="black--text">Logout</v-list-tile-title>
    </v-list-tile-content>
</v-list-tile>
</v-flex>
</v-list>

</v-navigation-drawer>
</nav>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex';

export default {
  data(){
    return{
    }
    },
    methods: {
      logoutUser () {
        this.$store.dispatch("logoutUser");
      }
      },
    computed: {
      ...mapState(['currentUser'])
    }
};

</script>