action用法是什么，异步操作怎样做-群英

action用法是什么，异步操作怎样做

Admin发表于 2022-11-19 17:51:49748 次浏览

关于“action用法是什么，异步操作怎样做”的知识点有一些人不是很理解，对此小编给大家总结了相关内容，文中的内容简单清晰，易于学习与理解，具有一定的参考学习价值，希望能对大家有所帮助，接下来就跟随小编一起学习一下“action用法是什么，异步操作怎样做”吧。

action用法

一、基本知识

1、不要再Mutation中进行异步操作.

但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?

Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.

Action的基本使用代码如下:

context是什么?

（1）context是和store对象具有相同方法和属性的对象.

（2）也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.

2、action的方法调用

在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch

同样的, 也是支持传递payload

3、Action与Promise

在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject

二、效果

页面中调用action中的方法

三、目录结构

四、源码

index.js

import { createStore} from 'vuex'


export default createStore({
	state: {
		counter: 0,
		info: {
		  name: 'kobe',
		  age: 40,
		  height: 1.98
		}
	},
	mutations: {
		updateInfo(state) {
		  state.info.name = 'coderwhy'
		}
	},
	actions: {
		aUpdateInfo(context, payload) {
		  return new Promise((resolve, reject) => {
		    setTimeout(() => {
		      context.commit('updateInfo');
		      console.log(payload);
		
		      resolve('1111111')
		    }, 1000)
		  })
		}
	},
	getters: { },
	modules: {}
})
 登录后复制

App.vue

<template>
    <div >
        <h2>----------action: info对象的内容是否是响应式----------</h2>
        <h2>{{$store.state.info}}</h2>
        <button @click="updateInfo">修改信息</button>
    </div>
</template>
 
<script>
    import {    computed } from 'vue'
    import {    useStore } from 'vuex'
    export default {
        components: {
        },
        methods: {
            updateInfo() {
              this.$store.dispatch('aUpdateInfo', '我是携带的信息')
                .then(res => {
                  console.log('里面完成了提交');
                  console.log(res);
                })
            },
              
        },
        setup() {
            return {
                  
            }
        }
    }
</script>

以上就是关于“action用法是什么，异步操作怎样做”的介绍了，感谢各位的阅读，希望文本对大家有所帮助。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： action用法

上一篇：如何理解vue组件化开发，实例是怎样的

下一篇： vuex中mutations的应用有哪些，有何用