vue3核心概念-Mutation-辅助函数

发布时间 2023-07-13 12:54:10作者: 商品部-林军

image-20220920153817103

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store

辅助函数只能在选项式API中使用

<template>
  <h3>Nums</h3>
  <p>{{ getCount }}</p>
  <input type="text" v-model="num">
  <button @click="addHandler">增加</button>
  <button @click="minHandler">减少</button>
</template>
<script>
import { mapGetters,mapMutations  } from 'vuex'
export default {
  data(){
    return{
      num:""
     }
   },
  computed:{
    ...mapGetters(["getCount"])
   },
  methods:{
    ...mapMutations(["increment","decrement"]),
    addHandler(){
      this.increment({
        num:this.num
       })
     },
    minHandler(){
      this.decrement({
        num:this.num
       })
     }
   }
}
</script>