localStorage.getItem () всегда возвращает ноль, даже если значение существует

Question

Я не уверен, что я делаю что-то неправильно или у меня где-то есть опечатка, но я пытаюсь сравнить даты в проекте vue, но значение, которое я извлекаю из локального хранилища, всегда возвращает ноль, даже когда я вижу значениеявно существует, когда я проверяю свое локальное хранилище.так вот настройки.

после выполнения запроса я установил дату истечения срока действия в локальном хранилище, как так

retrieveToken({ commit }, credentials) {

      return new Promise((resolve, reject) => {
          axios.post('/login', {
              username: credentials.username,
              password: credentials.password,
          })
          .then(response => {
              const token = response.data.access_token
              const date = new Date(moment().add(30, 'seconds').toDate());
              localStorage.setItem('expires_on', date)
              localStorage.setItem('access_token', token)
              resolve(response)
          })
          .catch(error => {
              console.log(error.response.data)
              reject(error)
          })
      })
    },

Затем я могу видеть, что expires on был помещен в мойлокальное хранилище

Затем я хочу использовать метод получения, чтобы получить это значение следующим образом:

tokenExpires() {
      return localStorage.getItem('expires_on')
    },

Так что я могу использовать вот так

computed: {
        ...mapGetters(['tokenExpires']),
    },
methods: {
     destroySessionIfTokenIsExpired() {
            const current = new Date(moment())
            const expires = this.tokenExpires
            const currentDate = moment(current).format('YYYYMMDDHHMMSS')
            const expiresDate = moment(expires).format('YYYYMMDDHHMMSS')
                console.log(this.tokenExpires)
                console.log(expiresDate)
            if(currentDate >= expiresDate) {
                this.$store.dispatch('destroyToken')
                .then(() => {
                    this.$router.push('/login')
                    alert('Your Session Has Expired, Please Log Back In')
                })
            } else return;
        }
       }

но когда я запускаю этот метод и console.log (this.tokenExpires), он возвращает null, и я не уверен почему.Если кто-то может увидеть, что я делаю неправильно, пожалуйста, дайте мне знать !!

* Обновите, моя проблема в том, что я пытаюсь посмотреть маршруты и сравнить временные метки, чтобы убедиться, что сеанс все еще действителен, нокак уже указывалось, getter не имеет достаточно времени для вычисления значения до запуска метода, поэтому любые предложения о том, как я могу обойти это, были бы замечательными.вот метод отслеживания маршрута

watch: {
        '$route': function(to, from) {
            this.destroySessionIfTokenIsExpired()
        }
    },

Answer 1

благодаря @YongQuan у меня есть это решение.

methods: {
        ...mapActions(['destroyToken']),
        destroySessionIfTokenIsExpired() {
            const expiresOn = localStorage.getItem('expires_on')
            const expiresDate = moment(expiresOn).format('YYYYMMDDHHMMSS')
            if(expiresOn == null) return;
            const current = new Date(moment())
            const currentDate = moment(current).format('YYYYMMDDHHMMSS')
            if(currentDate >= expiresDate) {
                this.$store.dispatch('destroyToken')
                this.$router.push('/login')
            } else return;
        }
    },
    watch: {
        '$route': function(to, from) {
            this.destroySessionIfTokenIsExpired()
        }
    },

Вместо использования getter я просто устанавливаю для `localStorage.getItem ('expires_on') переменную внутри метода.Спасибо @ YongQuan