vuex刷新后数据保存丢失的问题

Question

vue项目，刷新后store中的数据丢了，我用localstorage存储，在拿出来，发现页面会报错，不知道什么原因。
代码：

login：

methods: {
    ...mapMutations([
      'SET_USER',
    ]),
    Login(){
      Login(this.credentials.email,this.credentials.password)
      .then(res => {
        console.log(res.data,'请求成功')
        var data = res.data;
        if(data.error == ""){
          this.SET_USER(data.data);
          console.log(data.data);
          this.$router.go(-1);
        }
      })
    }
}

actions:

login(context, user) {
    context.commit(SET_USER, user);
},
getUser(context, user) {
    var data = {
        id: getStore('user_id'),//从localStorage中拿数据
        username: getStore('user_name'),
        session_id: getStore('session_id'),
    }
    context.commit(GET_USER, data)
}

mutations：

[SET_USER](state, user) {
    state.user = user;
    setStore('user_id', user.id);
    setStore('user_name', user.username);
    setStore('session_id', user.session_id);
},

[GET_USER](state, user) {
    state.user = user;
}

header组件：

    <template v-if="user">
      <router-link to="/login" :exact="true">登录&nbsp;&nbsp;</router-link>
      <router-link to="/signin" :exact="true">注册&nbsp;&nbsp;</router-link>
    </template>
    <template v-else>
      <b-nav-item-dropdown :right="!isRTL" class="demo-navbar-user">
        <template slot="button-content">
          <span class="d-inline-flex flex-lg-row-reverse align-items-center align-middle">
            <span class="px-1 mr-lg-2 ml-2 ml-lg-0">{{ user.username }}</span>
          </span>
        </template>
        <b-dd-item><i class="ion ion-ios-person text-lightest"></i> &nbsp; 个人中心</b-dd-item>
        <b-dd-divider />
        <b-dd-item><i class="ion ion-ios-log-out text-danger"></i> &nbsp; 退出登录</b-dd-item>
      </b-nav-item-dropdown>
    </template>
    
    
    script里边：
    mounted(){
        this.getUser()
      },
      methods: {
        ...mapActions([
          'getUser'
        ]),
        toggleSidenav () {
          this.layoutHelpers.toggleCollapsed()
        },
    
        getLayoutNavbarBg () {
          return this.layoutNavbarBg
        }
      },
      computed: {
        ...mapState([
          'user'
        ])
      },
      
      

getStore和setStore：

/**
     * 存储localStorage
     */
    export const setStore = (name, content) => {
        if (!name) return;
        if (typeof content !== 'string') {
            content = JSON.stringify(content);
        }
        window.localStorage.setItem(name, content);
    }
    
    /**
     * 获取localStorage
     */
    export const getStore = name => {
        if (!name) return;
        return window.localStorage.getItem(name);
    }
    
    /**
     * 删除localStorage
     */
    export const removeStore = name => {
        if (!name) return;
        window.localStorage.removeItem(name);
    }

这样下来页面就会抛异常

是我哪块写法不对么，vue-devtools中的state是有数据的

Answer 1

mounted(){
    this.getUser()
},
换成
created(){
    this.getUser()
},

没有看到你store的初始值 我猜是上面那个原因 一开始store.user为undefined

Answer 2

关键代码你没贴， setStore和 getStore

Answer 3

vue-savedata
可以自动储存 vuex数据到本地
这个插件 配置简单-并且支持session和 localstoreage 同时存在