Вычисленное значение VueJS не определено в компоненте, в то время как хранилище Vuex является правильным - PullRequest
0 голосов
/ 04 октября 2019

Используя Vue / Vuex / Axios / Express, я пытаюсь отключить кнопку всякий раз, когда lastAct пользователя находится в течение прошедшего дня. Я могу получить lastAct в магазине, но мое вычисленное значение не определено.

Вот мой экспресс-маршрут:

// GET last act for current user
router.get('/last', auth.required, async (req, res, next) => {
  console.log(' req is: ', req);
  const lastAct = await Act
    .query()
    .where('users_id', req.user.id)
    .orderBy('created_at', 'desc')
    .limit(1);
  res.json(lastAct);
})

мой сервис axios:

import Api from '@/services/Api'

export default {

...

  fetchLastAct () {
    return Api().get('acts/last')
  },

  deleteAct (id) {
    return Api().delete('acts/' + id)
  }
}

Вот соответствующие части моего магазина:

import Vue from 'vue'
import Vuex from 'vuex'

...

import ActsService from './services/ActsService'

// import SubscriptionsService from './services/SubscriptionsService'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    status: '',
    user: JSON.parse(localStorage.getItem('user')),

...

  },
  mutations: {

...

    setLastAct(state, lastAct) {
      state.lastAct = lastAct;
      console.log('store sets this last act: ', lastAct) // returns correct object
    }
  },
  actions: {

...

    async getLastAct({ commit }) {
      await ActsService.fetchLastAct()
        .then(resp => {
          console.log('this is the last act: ', resp); // returns correct object
          commit('setLastAct', resp.data[0]);
        });
    }
  },
  getters: {

    ...

    lastAct: state => {
      return state.lastAct;
    }
  }
})

и вычисленное значение моего компонента:

  computed: {
    ...,
    actedToday() {
      // const now = new Date();
      console.log('this is computed last act', this.$store.state.lastAct) //returns undefined
      return this.$store.state.lastAct
      // .created_at > now.setHours(0,0,0,0)
    }
  }

Ответы [ 2 ]

0 голосов
/ 04 октября 2019

Вот пример , который поможет вам понять, как работает магазин.

0 голосов
/ 04 октября 2019

Добавьте lastAct свойство в исходное состояние. Vue выиграл трек для динамического свойства, см. this

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...