Vuex存储正确时，组件中的VueJS计算值未定义答案

【问题标题】：VueJS computed value undefined in component while Vuex store is correctVuex存储正确时，组件中的VueJS计算值未定义
【发布时间】：2019-10-04 15:09:36
【问题描述】：

使用 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)
    }
  }

【问题讨论】：

您的state 中缺少lastAct

标签： vue.js vuex

【解决方案1】：

将lastAct 属性添加到您的初始状态。 Vue 赢得了动态属性的跟踪，请参阅this

【讨论】：

完美运行。谢谢！

【解决方案2】：

这里有一个example，可以帮助您了解商店的运作方式。

【讨论】：

这个资源很有帮助。谢谢！