一、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。

最后编辑于：2020.05.04 18:47:17