首页 > 其他分享 >vue3核心概念-Mutation-辅助函数

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

时间:2023-07-13 12:55:04浏览次数:28  
标签:辅助 函数 num Mutation vue3 mapMutations store methods

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>

 

标签:辅助,函数,num,Mutation,vue3,mapMutations,store,methods
From: https://www.cnblogs.com/junjuna/p/17550176.html

相关文章

  • vue3 图片懒加载
    使用vue第三方库useIntersectionObserver创建文件directives/index.js导入第三方库import{useIntersectionObserver}from'@vueuse/core'exportconstlazyPlugin={install(app){app.directive('img-lazy',{mounted(el,binding){......
  • Vue3 实现点击菜单实现切换主界面组件
    子组件菜单组件 MenuComponent列表组件 ExtTelListComponent状态组件 ExtTelStatusComponent父组件界面主体MainIndex 实现功能:在 MainIndex中引入三个子组件 通过点击 菜单组件切换加载 列表组件和状态组件 实现效果一、菜单组件 MenuComponent<......
  • Vue3+.net6.0 六 条件渲染
    v-if,v-else-if,v-else控制元素是否渲染,不满足条件的时候不会有相应元素。<divv-if="type==='A'">A</div><divv-else-if="type==='B'">B</div><divv-else-if="type==='C'">C&l......
  • vue3自定义指令 拖拽 与拖拽变大小
    directives:{drag:{mounted:(el,binding)=>{constdragDom=el;conststy=dragDom.currentStyle||window.getComputedStyle(dragDom,null);el.parentElement.style.cursor='move';......
  • Vue3+.net6.0 五 类和样式绑定
    Vue3关于样式的处理跟Vue2是一样的,常用的有以下几种。1.绑定属性html部分:<div:class="{active:isActive}"></div>js部分:data(){return{isActive:true}}当isActive值为true时,div应用这个active样式,反之亦然。 2.对象方式绑定<div:class="cla......
  • 19:vue3 依赖注入
    1、通过Prop逐级透传问题(传统老的方法只能逐级传递) 传统方式代码如下:App.vue1<template>2<h3>祖宗</h3>3<Parent:msg="msg"></Parent>4</template>56<script>7importParentfrom"./components/Parent.vue"......
  • AtCoder Beginner Contest 309 G Ban Permutation
    洛谷传送门AtCoder传送门前置知识:[ARC132C]AlmostSorted看\(\geX\)不顺眼,怎么办呢!直接容斥!钦定\(j\)个位置满足\(|P_i-i|<X\),其余任意,就转化成了[ARC132C]AlmostSorted。具体一点就是,你设\(f_{i,j,S}\)表示前\(i\)位有\(j\)个位置满足\(|P_i-i|<......
  • 18:vue3 异步加载
    在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。Vue提供了 defineAsyncComponent 方法来实现此功能: 1<template>2<h3>异步加载</h3>3<KeepAlive>4<component:is="tabComponent"></component>5</KeepAlive>......
  • 16:vue3 动态组件
    A组件1<template>2<h3>ComponentA</h3>3</template>B组件1<template>2<h3>ComponentB</h3>3</template> App.vue1<template>2<h3>动态组件(A、B两个组件动态切换)</h3>3<compo......
  • 15:vue3 组件生命周期函数应用
    1<template>2<h3>组件生命周期函数应用</h3>3<!--验证Dom结构加载时机-->4<pref="name">我的内容</p>5<!--模拟网络加载数据-->6<ul>7<liv-for="(item,index)inbanner":key="item.id&q......