重新加载页面后无法获取Vuex吸气剂和突变中的状态

Question

我正在使用vue-cli@3和vuex@3.0.1。

第一步：我打开URL，网站正在运行。第二步：我刷新了网站then errors are thrown。因此，我无法通过mapActions获取存储在getter中的数据，也无法使用mapActions导入的方法。即使我无法访问安装在Vue实例上的数据。

在vue-devtools中，遇到麻烦的as seen here会继续加载状态。我还尝试过vue-cli@2运行相同的代码，但仍然没有成功，因此我认为是Vuex引起的。

商店代码：

import Vue from 'vue'
import Vuex from 'vuex'
import util from '../lib/util'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    locale: localStorage.getItem('locale') || 'en',
    langdrop: false,
    loading: false,
    langs: ['en', 'zh'],
    modal: {
      notice: false,
      rule: false,
      about: false
    },
    phonelink: false,
    bet: 1,
    myinfo: {
      star: 0,
      amount: 0,
      staticEarn: 0,
      staticEarnd: 0,
      inviteEarn: 0,
      inviteEarnd: 0
    },
    bonusPot: 0,
    myInviteCode: 0,
    inviteCode: util.getParams().code || 0 
  },
  getters: {
    myinfo: state => state.myinfo,
    langdrop (state) {
      return state ? state.langdrop : false
    },
    loading (state) {
      return state ? state.loading : false
    },
    langs (state) {
      return state.langs.filter(item => {
        return item !== state.locale
      })
    },
    locale (state) {
      return state.locale
    },
    notice (state) {
      return state.modal.notice
    },
    rule (state) {
      return state.modal.rule
    },
    about (state) {
      return state.modal.about
    },
    phonelink (state) {
      return state.phonelink
    },
    bet (state) {
      return state.bet
    },
    myInviteCode (state) {
      return state.myInviteCode
    },
    inviteCode (state) {
      return state.inviteCode
    },
    bonusPot (state) {
      return state.bonusPot
    }
  },
  actions: {
    toggleLang (context) {
      context.commit('ToggleLang')
    },
    setlocale (context, lang) {
      localStorage.setItem('locale', lang)
      context.commit('SetLocale', lang)
    },
    UpdateHubLoading (context) {
      context.commit('UpdateHubLoading')
    },
    settingModal (context, type) {
      context.commit('SettingModal', type)
    },
    togglePhoneLink (context) {
      context.commit('TogglePhoneLink')
    },
    setBetValue (context, value) {
      if (value > 30 || value < 1) {
        return
      }
      value = Math.floor(value)
      context.commit('SetBetValue', value)
    },
    setMyinfo (context, value) {
      let target = {}
      target.addr = value.addr
      context.commit('SetMyinfo', target)
    },
    setMyInviteCode (context, code) {
      context.commit('SetMyInviteCode', code)
    },
    setBonusPot (context, bonus) {
      context.commit('SetBonusPot', util.bigNumbertoNumber(bonus, 18, 4))
    }
  },
  mutations: {
    ToggleLang (state) {
      state.langdrop = !state.langdrop
      if (state.langdrop === true) {
        state.pendingdrop = false
      }
    },
    SetLocale (state, lang) {
      state.locale = lang
    },
    UpdateHubLoading (state) {
      state.loading = !state.loading
    },
    SettingModal (state, type) {
      let status = !state.modal[type]
      if (status === true) {
        state.modal = {
          notice: false,
          rule: false,
          about: false
        }
      }
      state.modal[type] = status
    },
    TogglePhoneLink (state) {
      state.phonelink = !state.phonelink
    },
    SetBetValue (state, value) {
      state.bet = value > 30 ? 30 : value
    },
    SetMyinfo (state, value) {
      if (state) {
        state.myinfo = value || {
          star: 0,
          amount: 0,
          staticEarn: 0,
          staticEarnd: 0,
          inviteEarn: 0,
          inviteEarnd: 0
        }
      }
    },
    SetMyInviteCode (state, code) {
      state.myInviteCode = code || 0
    },
    SetBonusPot (state, bonus) {
      state.bonusPot = bonus || 0
    }
  }
})

组件代码：

created () {
   this.getMyinfo()
  },
  methods: {
    ...mapActions(['setMyinfo', 'setBonusPot', 'setAddress']),
    getMyinfo () {
      if (!this.address) return
      this.hasAddr = true
      this.$Contract.methods.addrPly(this.address).call().then(res => {
        this.setMyinfo(res)
      })
    },
    getBonus () {
      if (this.$Contract) {
        this.$Contract.methods.bonusPot().call().then(res => {
          this.setBonusPot(res)
        })
      }
    }
  }