Vue.js进阶系列(54)--Vuex的action

这里主要是关于Vuex中action的先容


一、action

1.产生原因

??当在mutations中进行异步操作时,Devtool不能够实时跟踪,导致最终在Devtool中记录的是错误的信息。比如:

const store = new Vuex.Store({ 
    state:{
      info:{
        name:'haha',
        age:13,
        height:1.45
      }
    },
   mutations:{
      changeInfo(state){
        // 异步操作
        setTimeout(()=>{
          state.info.name='哈哈'
        },1000)
      }
    }
})

上述代码主要是同异步操作来将“haha”修改成“哈哈”。结果如图所示:




??当在mutations使用异步操作时,虽然页面中的数据修改了,但是在Vuex总state记录的仍旧是以前的数据。
??其实数据是修改成功了,但是mutations中的Devtool在跟踪时没有记录,就导致记录的的错误的信息。
??所以不能再mutations中进行一步操作,这时大家就需要action帮大家进行一步操作。

2.定义

Action类似于Mutation, 但是是用来代替Mutation进行异步操作的

3.使用方式

使用方式和mutations类似,但是有两点不同:
① 参数:传入的参数是context。该参数相当于store对象
② 调用方式:使用dispatch调用,而不是使用commit
具体见下面的代码:

const store = new Vuex.Store({ 
   mutations:{
      state.info.name='哈哈'
      },
    actions:{
      achangeInfo(context){
        setTimeout(()=>{
          context.commit('changeInfo')
        },1000)
      }
    },
})
<script>
import store from '../store/index.js'
export default {
  name: 'App',
  methods:{
    changeInfo(){
      this.$store.dispatch('achangeInfo')
    }
  }
}
</script>


可以发现mutations中的Devtool记录的数据也跟着发生了改变。

4.传递参数

传递参数的方式和mutations类似,下面进行简单的传递字符串参数,具体代码如下:

const store = new Vuex.Store({ 
   mutations:{
      state.info.name='哈哈'
      },
    actions:{
      achangeInfo(context,payload){
        setTimeout(()=>{
          context.commit('changeInfo')
          console.log(payload)
        },1000)
      }
    },
})
<script>
import store from '../store/index.js'
export default {
  name: 'App',
  methods:{
    changeInfo(){
      this.$store.dispatch('achangeInfo','我是payload')
    }
  }
}
</script>

发现传递参数也是可以的,并且成功在控制台中显示了。

5.action内部使用Promise

??当数据commit之后就意味着修改成功了,此时想要告诉外界,数据已经修改成功了并且除了修改数据之外大家还可以做别的操作。该需求可以用Promise实现,具体先看下面代码:

   actions:{
      achangeInfo(context,payload){
        return new Promise((resolve,reject) =>{
          setTimeout(()=>{
            context.commit('changeInfo')
            console.log(payload)
            resolve('1111')
          },1000)
        })
      }
    }
<script>
    changeInfo(){
      this.$store
      .dispatch('achangeInfo','我是payload')
      .then(res =>{
        console.log(res)
      })
    }
</script>

??上述代码的主要作用是当数据修改成功之后,就在控制台上打印“1111”。具体思路是当action运行到commit方法时,就会实行changeInfo函数,然后在回调changeInfo函数。
??本案例中,当实行achangeInfo函数时,就返回 Promise,而achangeInfo是通过dispatch调用的,其上述的代码可以等价为下面的代码:

<script>
    changeInfo(){
      //this.$store
     //.dispatch('achangeInfo','我是payload')
     new Promise((resolve,reject) =>{
          setTimeout(()=>{
            context.commit('changeInfo')
            console.log(payload)
            resolve('1111')
          },1000)
      .then(res =>{
        console.log(res)
      })
    }
</script>

??以上就是action相关的常识,总结起来就是两点:处理异步操作和在内部使用Promise。