在使用 Vuex 存储状态时，我们应该遵循 Vuex 的规则，即不要在 mutation 处理程序之外更改状态。这是因为 Vuex 的状态是响应式的，只有通过 mutation 来更改状态才能确保状态的一致性和可追踪性。

以下是一个使用 Vuetify snackbar 的示例，展示了如何正确地在 mutation 处理程序内更改 Vuex 的状态：

1. 首先，定义一个名为 store.js 的 Vuex store：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    snackbar: {
      show: false,
      message: '',
      color: ''
    }
  },
  mutations: {
    showSnackbar(state, { message, color }) {
      state.snackbar.show = true;
      state.snackbar.message = message;
      state.snackbar.color = color;
    },
    hideSnackbar(state) {
      state.snackbar.show = false;
    }
  },
  actions: {
    showSnackbar({ commit }, { message, color }) {
      commit('showSnackbar', { message, color });
      setTimeout(() => {
        commit('hideSnackbar');
      }, 3000);
    }
  }
});

2. 在你的组件中，可以通过调用 this.$store.dispatch 方法来触发 action，然后在 action 中调用 mutation：

在上述示例中，当点击按钮时，会触发 showSnackbar 方法，该方法会调用 showSnackbar action，并传递消息和颜色参数。在 action 中，我们首先调用 commit 方法来触发 showSnackbar mutation，然后使用 setTimeout 设置一个定时器，在3秒后触发 hideSnackbar mutation 来隐藏 snackbar。

这样，我们就在 mutation 处理程序内正确地更改了 Vuex 的状态，而不是在 mutation 处理程序之外进行更改。