Question

请帮助我，它总是显示无法读取未定义的属性“提交”。这是我在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的属性“提交”

1 个答案: