201 Introducing Mutations - A Better Way of Changing Data

在 Vue 中，Mutations 是 Vuex 状态管理模式中的重要组成部分。

Mutations 主要用于更改 Vuex 中的状态。它提供了一种集中且规范的方式来修改应用的全局状态数据。每个 Mutation 都是一个函数，函数接收当前的状态作为第一个参数，通过对状态的直接修改来实现状态的变更。

Mutations 遵循严格的单向数据流原则，即只能通过提交 Mutation 来修改状态，而不能直接在组件中修改状态。这样可以确保状态的变化可追踪、可预测，有助于提高应用的可维护性和稳定性。同时，由于 Mutation 中的操作通常是同步的，使得开发者能够清晰地了解状态变化的时机和顺序。

步骤

1、main.js中添加mutations

import { createApp } from 'vue';
import { createStore } from 'vuex';

import App from './App.vue';

const store = createStore({
  state() {
    return {
        counter: 0,
    };
  },
  mutations: {
    increment(state) {
      state.counter += 2;
    },

  },
});

const app = createApp(App);

app.use(store);

app.mount('#app');

2、在其它组件中执行

methods: {
    addOne() {
      this.$store.commit('increment');
    }
  }