位置:首页 > web前端 > vue

vue3.x中vuex的actions

dearweb 发布:2021-08-15 12:01:11阅读:

在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里面主要就是用来执行异步操作的方法,你学会了吗?如果文档有不足之处,还望大佬指点一二。

24人点赞 返回栏目 提问 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言(问题紧急可添加微信 xxl18963067593) 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

本刊热文
网友在读
手机扫码查看 手机扫码查看