vuex mutations的两种调用方法小结
更新时间：2022年03月28日 11:21:43 作者：程序员徐小白
这篇文章主要介绍了vuex mutations的两种调用方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
mutations的调用方法
直接通过$store.commit调用
<button @click="$store.commit('mutations中的方法名','可带参数')">调用</button>不需要再进行其他配置
通过在methods中注册方法调用
//先引入mapMutations
import {mapMutations} from 'vuex'
export default {
data(){
return{
msg:"hello vuex"
}
},
//注册方法，三个.是属性展开符，可以将mapMutations中的方法展开后放入methods中，就可以直接调用了
methods:{
...mapMutations(['mutations中的方法名称'])
}
}<button @click="mutations中的方法名称('可带参数')">-</button>细数mutations的用法
为什么要用mutations
使用mutations的好处是可以跟踪到是哪里调用了mutations里的方法，在严格模式下调用mutations也不会报错。
如果用其它方法的话上面说的两个好处都不存在。
用法
先定义个mutations对象，然后定义指定的方法就可以了，很简单，代码示例：
state: {
isHome: true
},
mutations: {
changeIsHome(state) { // 这里将state传进来了
state.isHome = false
}
}在stote.js中定义好mutations方法之后，就在vue中触发事件的时候调用mutations方法就可以了，调用方法示例：
// 这里示例是在created方法中触发mutations方法
created() {
this.$store.commit('changeIsHome') // 这就是调用的方法
},执行：this.$store.commit('changeIsHome')；就可以调用mutations方法了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- vuex中store的action和mutations用法
- Vuex中的Mutations的具体使用方法
- Vuex modules模式下mapState/mapMutations的操作实例
- 在Vuex使用dispatch和commit来调用mutations的区别详解
- vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
- 详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
- Vuex中mutations与actions的区别详解
- Vuex之理解Mutations的用法实例
- vuex mutations 同步操作方法详解
相关文章
这篇文章主要为大家详细介绍了Vue实现图片验证码生成，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
解决vue中使用history.replaceState 更改url vue router 无法感知的问题
这篇文章主要介绍了vue中使用history.replaceState 更改url vue router 无法感知的问题,本文给大家分享修复这个问题的方法，需要的朋友可以参考下2022-09-09
Vue ElementUI中el-table表格嵌套样式问题小结
这篇文章主要介绍了Vue ElementUI中el-table表格嵌套样式问题小结,两个表格嵌套,当父表格有children数组时子表格才展示,对Vue ElementUI中el-table表格嵌套样式问题感兴趣的朋友跟随小编一起看看吧2024-02-02
今天小编就为大家分享一篇vue项目引入字体.ttf的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了使用VitePress搭建及部署vue组件库文档,本文以element-plus作为示例来搭建一个文档，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue-cli4.x创建企业级项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
axios中post请求json和application/x-www-form-urlencoded详解
Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用,下面这篇文章主要给大家介绍了关于axios中post请求json和application/x-www-form-urlencoded的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了Vue实现通知或详情类弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家介绍了npm run dev报错信息及解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
在我工作过程中使用el-dialog的需求挺多的,也积累了一下使用技巧,这篇文章主要给大家介绍了关于VUE学习宝典之el-dialog使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
最新评论