无法读取未定义 VUEX 的属性 'commit'

Question

请帮助我它总是说无法读取未定义的属性 'commit'。这是我在 store.js.

中的代码

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

Vue.use(Vuex);

export const store = new Vuex.Store({
  state:{
     timer: null,
     totaltime: (25 * 60)
  }, 
  mutations:{
    startTimer: (state, context) => {
    //here is the problem part I think
      state.timer = setInterval(() => context.commit('countDown'),
      1000)
    },
    countDown: state => {
      var time = state.totaltime
      if(time >= 1){
        time--
      }else{
        time = 0
      }
    },
    stopTimer: state => {
      clearInterval(state.timer)
      state.timer = null
    },
    resetTimer: state => {
      state.totaltime = (25 * 60)
      clearInterval(state.timer)
    }
  },
  getters:{
      minutes: state => {
        const minutes = Math.floor(state.totaltime / 60);
        return minutes;
      },
      seconds: (state, getters) => {
        const seconds = state.totaltime - (getters.minutes * 60);
        return seconds;
      }
  },
  actions:{


  }
})

我在调试时遇到问题。它总是这样说 '无法读取未定义的属性 'commit''

这是我的 Timer.vue 调用代码

methods: {
      formTime(time){
        return (time < 10 ? '0' : '') + time;
      },
      startTimer(){
        this.resetButton = true
        this.$store.commit('startTimer')
      },
      stopTimer(){
        this.$store.commit('stopTimer')
      },
      resetTimer(){
        this.$store.commit('resetTimer')
      },

    },
    computed: {
      minutes(){
        var minutes = this.$store.getters.minutes;
        return this.formTime(minutes)
      },
      seconds(){
        var seconds = this.$store.getters.seconds;
        return this.formTime(seconds);
      },
      timer: {
        get(){
          return this.$store.state.timer
        }
      }
    }

我在 Timer.vue 脚本计算和方法中的代码。我无法追踪问题出在哪里...请帮助我，我在这里遇到了这个问题。

Answer 1

突变无法访问任何 context。它们注定是原子的，也就是说它们直接与状态的一个方面一起工作。你应该让你的 startTimer 成为一个 action 来提交 timer 然后开始倒计时

mutations: {
  // add this one for setting the timer
  setTimer (state, timer) {
    state.timer = timer
  }
},
actions: {
  startTimer ({ commit }) {
    commit('stopTimer') // just a guess but you might need this
    commit('setTimer', setInterval(() => {
      commit('countDown')
    }, 1000))
  }
}

这需要通过 dispatch 而不是 commit

来调用

this.$store.dispatch('startTimer')

无法读取未定义 VUEX 的属性 'commit'

Cannot read property 'commit' of undefined VUEX

javascript

commit

undefined

vuex

无法读取未定义 VUEX 的 属性 'commit'

Cannot read property 'commit' of undefined VUEX

javascript

commit

undefined

vuex

无法读取未定义 VUEX 的属性 'commit'