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自定义指令详解

    Vue自定义指令详解

    这篇文章主要为大家介绍了Vue自定义指令,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 浅谈vue中的data与_data的关系是什么

    浅谈vue中的data与_data的关系是什么

    在Vue实例中,data属性是用户定义的用于存储数据的对象,而_data是Vue内部用于存储数据的对象,本文主要介绍了浅谈vue中的data与_data的关系是什么,感兴趣的可以了解一下
    2023-12-12
  • 浅谈vue的第一个commit分析

    浅谈vue的第一个commit分析

    这篇文章主要介绍了浅谈vue的第一个commit分析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue中的style样式如何动态绑定

    vue中的style样式如何动态绑定

    这篇文章主要介绍了vue中的style样式如何动态绑定,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue报错Failed to execute 'appendChild' on 'Node'解决

    vue报错Failed to execute 'appendChild&apos

    这篇文章主要为大家介绍了vue报错Failed to execute 'appendChild' on 'Node'解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vue3如何定义变量及ref、reactive、toRefs特性说明

    vue3如何定义变量及ref、reactive、toRefs特性说明

    这篇文章主要介绍了vue3如何定义变量及ref、reactive、toRefs特性说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理

    vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理

    vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求,目前支持上下左右无缝滚动,单步滚动,及支持水平方向的手动切换功能,本节介绍,vue添加 vue-seamless-scroll实现自动无缝滚动的效果,并对应添加点击事件
    2023-01-01
  • Vue组件开发之异步组件详解

    Vue组件开发之异步组件详解

    这篇文章主要为大家详细介绍了Vue组件开发之异步组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • vue+webpack 更换主题N种方案优劣分析

    vue+webpack 更换主题N种方案优劣分析

    这篇文章主要介绍了vue+webpack 更换主题N种方案优劣分析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 前端elementUI select选择器实现远程搜索

    前端elementUI select选择器实现远程搜索

    这篇文章主要为大家介绍了前端使用elementUI select选择器实现远程搜索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05

最新评论