mutations,actions的用法

1、mutations

mutations.js

mutations是专门修改store中状态的，同步修改数据
// mutations专门用来修改data里面的数据，data里面的数据也可以在外面修改，但是不推荐在外面修改
// 只能执行同步的代码
// mutatiosn的方法只接受2个参数，第一个参数是state（store中的state），第二个参数是一个obj
export  default {
  updateCount (state, num) {
    state.count = num
  }
}

app.vue

mounted:function(){
     let i = 1;
      setInterval(() => {
              //触发mutations  this.$store.commit('name',obj)
          this.$store.commit('updateCount', i++)
      },1000)
}
state的值推荐不要在外面修改this.$store.state.count = 3;为了防止在外面修改，添加如下图参数，但是在正式环境下必须把他注释

辅助函数写法：

app.vue

import { mapMutations } from 'vuex'
methods:{
    ...mapMutations ['updateCount']
},
mounted:functions(){
     this.updateCount('updateCount', 2)
}

image.png

2、actions

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。(比如数据请求)
actions.js
export default {
  // actions用于修改data的数据，异步请求
  // actions函数的一个参数是store,也就是vux的整个对象，第二参数是一个对象，（只有2个参数）
  updateCountAsync (store, data) {
    setTimeout(() => {
      store.commit('updateCount', data.num)
    }, data.time)
  }
}

app.vue
dispatch专门用来触发actions
this.$store.dispatch('updateCountAsync',{
  num: 5,
  time: 2000
})

辅助函数写法：

app.vue
import { mapActions } from 'vuex'

methods:{
    ...mapActions(['updateCountAsync']),
},
mounted:function(){
      this.updateCountAsync({
        num: 5,
        time: 2000
      })
}