vue3.x中vuex的actions

在vuex中我们有时会执行异步操作，这时候如果直接在mutations中进行操作会出现不能调用mutations里面其他的方法，所以为了提高开发效率，我们会将异步操作写在actions里面，话不多说直接上代码。

定义actions

import { createStore } from 'vuex'
const store = createStore({

  state(){
    return {
      count:1,
      list:'wuhan',
      todos:[
        {id:1,tetx:'一条河',done:true},
        {id:2,tetx:'一条大河',done:false},
      ]
    }
  },
  mutations:{
    increment(state){
      state.count++
    },
  },
  getters:{
  },
  actions:{
    // 主要用于执行异步操作和mutations里面的方法
    setContent(content){
      setTimeout(()=>{
        console.log(13)
      },2000)
      //执行mutations里面的方法
      content.commit('increment')
    }
  }
})

export default store;

执行actions的模块定义

<template>
<div>
  {{count}}  
  <button @click="implementActions">执行actions里面的方法</button>
</div>

</template>

<script>
  export default {
    name: 'App',
    data(){
      return{
      }
    },
  created() {
    console.log(this.$store.state)
  },
  methods: {
     implementActions(){
       // 执行actions里面的方法
       this.$store.dispatch('setContent')
     }
  },
}
</script>

actions里面主要就是用来执行异步操作的方法，你学会了吗？如果文档有不足之处，还望大佬指点一二。