vuex state mutations

App.vue 

<template>
  <div>
    <my-addition></my-addition>
    <my-subtraction></my-subtraction>
  </div>
</template>
<script>
import Addition from "./components/Addsition.vue";
import Subtraction from "./components/Subtraction.vue";
export default {
  data() {
    return {};
  },
  components: {
    "my-addition": Addition,
    "my-subtraction": Subtraction,
  },
};
</script>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

Store的index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    a:0,
    b:5
  },
 
  mutations: {
    add(state) {
      state.a++
    },
    sub(state){
      state.b--
    },
    subb(state,step) {
      state.b -=step;
    }
  },
})

在组件中获取状态 以及改变状态的函数 

方式一 适应简单较少的方法 this.$store.state.全局状态的名字，this.$store.commit("改变状态方法名")

<template>
  <div>
    <h3>当前最新的count值为：{{ $store.state.a }}</h3>
    <button @click="inc">+1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    inc() {
      this.$store.commit("add");
    },
  },
};
</script>

方法二 较多的状态方法 通过映射的方式

state通过  ...mapState(['全局状态的名字']) 放在计算属性中 直接当计算属性用

mutations通过 ...mapMutations(['改变状态方法的名字']) 放在方法中 直接当方法使用

<template>
  <div>
    <h3>当前最新的count值为：{{b}}</h3>
    <button @click="dec">-1</button>
    <button @click="decc">-3</button>
  </div>
</template>
<script>

import { mapState,mapMutations } from 'vuex';
export default {
  data() {
    return {};
  },
  computed:{
    ...mapState(['a','b']) //映射状态
  },
  methods: {
    ...mapMutations(["sub", "subb"]),//映射方法
    dec() {
      this.sub();
    },
    decc() {
      this.subb(3);
    },
  },
};
</script>