vuex的mutation和action的区别和使用

mutation

更改 vuex 的 store 中的状态的唯一方法是提交 mutation。vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

this.$store.commit(“mutation函数名”,发送到mutation中的数据)

Action

actions函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。

this.$store.dispatch(‘action中的函数名’,发送到action中的数据)

在action中提交mutation :

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {    //官方给出的指定对象, 此处context可以理解为store对象
      context.commit('increment');
    }
  }
})

actions的不同写法

// 第一种写法简写形式
  const actions = {
    action的函数名({commit}) { 
      commit(“mutation函数名”, value);   //调用mutation中的函数
      //此处value可以是对象,可以是固定值等
    }
  }
  // 第二种形式
  const actions = {
    action中的函数名(context) {
      //context 官方给出的指定对象, 此处context可以理解为store对象
      context.commit(“mutation函数名”, value);     //调用mutation中的函数
    }
  }

1、流程顺序

“相应视图—>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。

2、角色定位

基于流程顺序,二者扮演不同的角色。

Mutation:专注于修改State,理论上是修改State的唯一途径。

Action:业务代码、异步请求。

3、限制

角色不同,二者有不同的限制。

Mutation:必须同步执行。

Action:可以异步,但不能直接操作State。而且可以通过 action 来提交 mutations

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » vuex的mutation和action的区别和使用

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活