zoukankan      html  css  js  c++  java
  • Vuex 第5节 actions异步修改状态

    Vuex 第5节 actions异步修改状态


    第5节 actions异步修改状态

    actions和之前讲的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态(会互相干扰)

    store.js中声明actions,actions是可以调用Mutations里的方法的,我们还是继续在上节课的代码基础上进行学习,在actions里调用add和reduce两个方法。

    const actions={
        addAction(context){
            context.commit('add',10)
        },
        reduceAction({commit}){
            commit('reduce');
        }
    }
    

    在actions里写了两个方法addAction和reduceAction,在方法体里,我们都用commit调用了Mutations里边的方法。细心的小伙伴会发现这两个方法传递的参数也不一样。

    • context上下文对象,这里你可以理解称store本身
    • (commit):直接把commit对象传递过来,可以让方法体逻辑和代码更清晰明了。

    模板中的使用
    我们需要在Count.vue模板中编写代码,让actions生效。我们先复制两个以前有的按钮,并改成我们的actions里的方法名,分别是:addAction和reduceAction。

    <button @click="addAction">+</button>
    <button @click="reduceAction">-</button>
    

    改造一下我们的methods方法,首先还是用扩展运算符把mapMutations和mapActions加入。

    methods:{
    	...mapMutations(['add','reduce']),
        ...mapActions(['addAction','reduceAction'])
    },
    

    还要记得用import把我们的mapActions引入才可以使用。

    import { mapState,mapMutations,mapGetters,mapActions } from 'vuex';
    

    同样的实现效果:

    我们现在看的效果和我们用Mutations做的一模一样,那actions有什么用?

    增加异步检验
    我们为了演示actions的异步功能,我们增加一个计时器(setTimeOut)延迟执行。在addAction里使用setTimeOut进行延迟执行。

    addAction(context){
    	context.commit('add',10);
    	setTimeout(()=>{context.commit('reduce')},3000);
        console.log('我比reduce先执行');
    },
    

    看到浏览器:

  • 相关阅读:
    Form 中调用指定请求并给定默认参数
    OAF 汇总行的做法
    EBS 开发常用SQL
    EBS 中常用的配置文件及说明
    OAF 常见概念介绍
    OAF 多语言的实现
    OAF 个性化基础
    OAF 开发前置配置
    条款20 STL函数对象
    条款19 command 模式与好莱坞法则
  • 原文地址:https://www.cnblogs.com/Elva3zora/p/12714546.html
Copyright © 2011-2022 走看看