vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vuex mutations 同步操作方法详解

vuex mutations 同步操作方法详解

投稿：wdc

这篇文章主要介绍了vuex mutations 同步操作方法,需要的朋友可以参考下

作用：修改vuex中的state，只可以通过mutations修改

// 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 同步操作方法详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文