Mutation常量类型 vuex

图解

store>mutation-types.js

export const INCREMENT_N = "incrementN";

App.vue

<template>
  <div class="app">
    <table border="1">
      <h2>{{ $store.state.counter }}</h2>
      <button @click="increment">+1</button>
      <button @click="decrement">-1</button>
      <hr />
      <button @click="increment_10">+10</button>
    </table>
  </div>
</template>

<script>
import { INCREMENT_N } from "./store/mutation-types";
export default {
  name: "App",
  components: {},
  methods: {
    increment() {
      this.$store.commit("increment");
    },
    decrement() {
      this.$store.commit("decrement");
    },
    // 第一种提交风格
    increment_10() {
      this.$store.commit(INCREMENT_N, { step: 10 });
    },

    // 第二种提交风格
    // increment_10() {
    //   this.$store.commit({
    //     type: "incrementN",
    //     step: 10,
    //   });
    // },
  },
};
</script>

<style></style>