Vuex不能阻止setInteval

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    timerId: null,
    counter: 0
  },
  mutations: {
    startTimer(state) {
      state.timerId = setInterval(() => {
        state.counter++;
      }, 1000);
    },
    stopTimer(state) {
      clearInterval(state.timerId);
      state.timerId = null;
    }
  }
});

export default store;

// MyComponent.vue
<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <button @click="startTimer">Start Timer</button>
    <button @click="stopTimer">Stop Timer</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['counter'])
  },
  methods: {
    ...mapMutations(['startTimer', 'stopTimer'])
  },
  mounted() {
    this.startTimer();
  },
  beforeDestroy() {
    this.stopTimer();
  }
};
</script>