vuex的actions操作

最新推荐文章于 2024-07-08 15:04:06 发布

吴锦阳，

最新推荐文章于 2024-07-08 15:04:06 发布

阅读量1.3k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/wjyxiaocainiao/article/details/122958952

版权

本文介绍了如何在Vue应用中使用actions进行异步操作，展示了actions与mutations的区别，以及如何通过dispatch调用actions并最终提交到mutations实现数据更新。实例涵盖了带参数的action提交和使用辅助函数简化操作。

摘要由CSDN通过智能技术生成

前面写了state 的获取和mutations 提交，今天来写actions的提交。

actions其实就是mutations，只不过actions做的是异步的操作，mutations做的是同步的操作，

所以，actions进行提交动作到mutations,mutations再进行commit,不知道说的理解没。上代码吧：

<template>
//写有注释的才是重点
<div>
  <p>当前最新的count值为：{{$store.state.count}}</p>
  <button @click="handleAdd">+1</button>   //在这里进行异步操作，点击1秒后再加1
  <button @click="handleStep">+n</button>
</div>
</template>
<script>
import {mapState,mapActions,mapMustation} from 'vuex' 
export default {
  name: 'addition',
  components: {},
  data () {
    return {
      // step:3
    }
  },
  methods:{
    //  ...mapMustation(['add']),
    handleAdd(){
      // this.$store.commit('add',1)  
      this.$store.dispatch('addAsync')   // 因为这里是actions的提交嘛。
//所以是dispatch,派发到actions的对应方法中再commit 到mutations的具体方法
    },
    handleStep(){
       this.$store.commit('addN',3)
    },
  },
  computed: {
    ...mapState(['count']) 
  }
}
</script>
<style scoped>
</style>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    // add(state,num){
    //   state.count= state.count+ num
    // },
    addN(state,step){
      state.count = state.count+ step
    },
    del(state,num){
      if(state.count >0){
        state.count=state.count-num;
      }else{
        state.count =0
      }
     
    },
    jian(state,n){
      state.count = state.count-n
    },
    add(state){ //action触发的函数在这
      state.count++
    }
  },
  actions: { 
//要异步，所以要间接方式更新数据，actions是不能直接更改数据，你只要记住一件事，
//那就是只有mutation能更改数据，通过mutations,所以操作如下: 
    addAsync(context){
      setTimeout(()=>{
        context.commit('add') // 提交到mutations的add方法
      },1000)
    }
  }
})

如果要携带参数，就是这样子的

<template>
<div>
  <p>当前最新的count值为：{{$store.state.count}}</p>
  <button @click="handleAdd">+1</button>
  <button @click="handleStep">+n</button>
</div>
</template>
<script>
import {mapState,mapActions,mapMustation} from 'vuex'
export default {
  name: 'addition',
  components: {},
  data () {
    return {
      // step:3
    }
  },
  methods:{
    //  ...mapMustation(['add']),
    handleAdd(){
      // this.$store.commit('add',1)
      // 点击方法体handleAdd，触发提交store的add方法
      this.$store.dispatch('addAsync')
    },
    handleStep(){
      //  this.$store.commit('addN',3)
      // 如果在data 写step,那么这里写成这样：this.$store.commit('addN',this.step)
      this.$store.dispatch('addnAsync',5)
    },
  },
  computed: {
    ...mapState(['count'])  // 用...展开运算符把Count展开在资源属性里
  }
}
</script>
<style scoped>
</style>







store.js的代码：


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    // add(state,num){
    //   state.count= state.count+ num
    // },
    addN(state,step){
      state.count = state.count+ step
    },
    del(state,num){
      if(state.count >0){
        state.count=state.count-num;
      }else{
        state.count =0
      }
     
    },
    jian(state,n){
      state.count = state.count-n
    },
    add(state){
      state.count++
    },
    addn(state,step){  // 触发的方法在这里
      state.count += step
    }
  },
  actions: {
    addAsync(context){
      setTimeout(()=>{
        context.commit('add')
      },1000)
    },
    addnAsync(context,step){  // 重点在这里
      setTimeout(()=>{
        context.commit('addn',step)
      },2000)
    }
  }
})

辅助函数的话好像也挺简单的，从vuex引入相关辅助函数，然后在方法体内扩展开数组，参数是actions里的具体的方法，然后用点击的方法回调具体方法一次；上个代码吧：

<template>
<div>
  <p>当前最新的count值为：{{$store.state.count}}</p>
  <button @click="handleAdd">+1</button>
  <button @click="handleStep">+n</button>
</div>
</template>
<script>
import {mapState,mapActions,mapMustation} from 'vuex'
export default {
  name: 'addition',
  components: {},
  data () {
    return {
    }
  },
  methods:{
    ...mapActions(['addAsync','addnAsync']),
    handleAdd(){
      this.addAsync()
    },
    handleStep(){
      this.addnAsync(5)
    },
  },
  computed: {
    ...mapState(['count'])  // 用...展开运算符把Count展开在资源属性里
  }
}
</script>
<style scoped>
</style>


store.js的代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add(state){
      state.count++
    },
    addn(state,step){
      state.count += step
    }
  },
  actions: {
    addAsync(context){
      setTimeout(()=>{
        context.commit('add')
      },1000)
    },
    addnAsync(context,step){
      setTimeout(()=>{
        context.commit('addn',step)
      },2000)
    }
  }
})

ok,整完