vuex mutations 同步操作方法详解
更新时间:2023年10月02日 09:47:03 投稿:wdc
这篇文章主要介绍了vuex mutations 同步操作方法,需要的朋友可以参考下
作用:修改vuex中的state,只可以通过mutations修改
- 需要通过commit提交同步方法(1.只提交方法,参考实例1;2.携带参数提交,参考实例2)
- 同步方法中第一个默认参数是state,可以通过state.xx拿取state中已经定义好的数据
// state中定义一些初始数据用来举例 state: { // 定义一个数字 count: 0, // 定义一个对象 coderyg: { name: 'coderyg', age: 25, height: 1.93 }, // 定义一个字符串 info: 'swk' }
实例1:修改count(只提交方法)
// App.vue <p>{{ $store.state.count }}</p> //此时的count是0 <button @click="addCount">+</button> <button @click="subCount">-</button> // 提交同步 addCount() { this.$store.commit('increment'); }, subCount() { this.$store.commit('decrement'); } // index.js // 接收同步 increment(state) { state.count ++; }, decrement(state) { state.count --; }
实例2.1:携带参数普通方法提交
// App.vue <p>{{ $store.state.count }}</p> //此时的count是0 <button @click="changeNum(+5)">+5</button> <button @click="changeNum(-5)">-5</button> // 提交同步--直接提交参数,num是一个数字 changeNum(num) { this.$store.commit('addNum', num); } // index.js // 接收同步 addNum(state, num) { state.count += num; }
实例2.2:携带参数对象方法提交
// App.vue <p>{{ $store.state.count }}</p> //此时的count是0 <button @click="changeNum(+5)">+5</button> <button @click="changeNum(-5)">-5</button> // 提交同步--对象方式提交会以整个payload提交过去,通过payload.XX拿取提交过去的信息 changeNum(num) { this.$store.commit(从这开始{ type: 'addNum', num }到这结束是payload); } // index.js // 接收同步 addNum(state, payload) { state.count += payload.num; }
到此这篇关于vuex mutations 同步操作方法详解的文章就介绍到这了,更多相关vuex mutations 同步操作方法详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue报错Failed to execute 'appendChild&apos
这篇文章主要为大家介绍了vue报错Failed to execute 'appendChild' on 'Node'解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-11-11vue3如何定义变量及ref、reactive、toRefs特性说明
这篇文章主要介绍了vue3如何定义变量及ref、reactive、toRefs特性说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-06-06vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理
vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求,目前支持上下左右无缝滚动,单步滚动,及支持水平方向的手动切换功能,本节介绍,vue添加 vue-seamless-scroll实现自动无缝滚动的效果,并对应添加点击事件2023-01-01
最新评论