学习笔记-vuex核心概念(四)-actions异步函数

最新推荐文章于 2024-07-10 22:11:08 发布

Rose Thief

最新推荐文章于 2024-07-10 22:11:08 发布

阅读量169

点赞数 3

文章标签：学习笔记

本文链接：https://blog.csdn.net/qq_63064285/article/details/139545992

版权

前提

有时候我们想要对修改状态进行异步操作，这时后可以使用actions

actions的使用

this.$store.dispatch('xxx', 参数)

index.js

state: {
    userInfo: {
      username: '张三',
      userage: 8
    },
  },

mutations: {
    updateUserage (state, newage) {
      state.userInfo.userage = newage
    }
  },

actions: {
    updateUserage2 (context, newage) {
      setTimeout(() => {
        context.commit('updateUserage', newage)
      }, 1000)
    }
  }

渲染页面

<template>
    <div>
      <p>{{ $store.state.userInfo.userage }}</p>
      <button @click="handleUpdate2(21)">延时1s更改年龄</button>
    </div>
</template>

<script>

export default {
  computed: {
  },
  methods: {
    handleUpdate2 () {
      this.$store.dispatch('updateUserage2', 20)
    }
  }
}
</script>

<style>

</style>

mapAction辅助函数的使用

<template>
    <div>
      <p>{{ $store.state.userInfo.userage }}</p>
      <button @click="updateUserage2(21)">延时1s更改年龄</button>
    </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  computed: {

  },
  methods: {
    ...mapActions(['updateUserage2']),
  }
}
</script>

<style>

</style>