• vue(29)vuex使用actions


    vuex的actions用于和后台交互。比如vuex我们有一个购物车的全局状态,保存加入购物车的商品。

    在页面上点击添加商品到购物车后,首先要将商品传入后台,在后台添加到购物车表中后,再改变vuex中的购物车全局状态添加这个商品。

    整个流程就是页面调用actions中的方法,再actions的方法中与后台交互调用后台添加商品的接口,成功后再调用mutations中的方法来改变state中定义的购物车全局状态。

    /store/index.js:

    import { stringifyQuery } from 'vue-router';
    import {createStore} from 'vuex'

    export default createStore({
        state:{
            name:"tom",
            carts:[]
        },
        mutations:{
            editeName(state,name){
                state.name=name;
            },
            addToCarts(state,good){//改变carts
                state.carts.push(good);
            }
        },
        getters:{
            upperName(state,getters){
                return  state.name.toUpperCase();
            },
            upperNameAndAdd$(state,getters){
                return getters.upperName+"$";
            },
        },
        actions:{
            addToCatrs(context,good){//后台交互调用mutations中的方法改变全局状态。context为固定变量,里面可以获取states/mutations/getters中的所有数据。good为传入的变量可以随意命名。
                setTimeout(()=>{//模拟后台请求
                    context.commit('addToCarts',good);//commit用于调用mutations中的方法
                },3000);
      //这里还可以定义一个返回promise,这样组件中调用这个方法的时候就可以通过返回值判断添加是否成功
            }
        }
    });
     
    组件中显示和调用:
        <p>{{$store.state.carts}}</p>//显示全局属性carts
        <br>
        <button @click="addGood()">添加商品</button>//点击后的方法中调用actions中定义的方法
     
     methods:{
        addGood(){
          this.$store.dispatch('addToCatrs','篮球');//使用dispatch调用actions中定义的方法
        }
      }
  • 相关阅读:
    音频算法之我思
    图像去模糊算法 循序渐进 附完整代码
    音频算法之小黄人变声 附完整C代码
    RocketMQ(2)---核心概念、特性、使用等
    RocketMQ(1)---架构原理及环境搭建
    RabbitMQ(2)---高级使用
    面试问题---JAVA程序CPU占用过高怎么定位
    RabbitMQ(1)---基本概念及简单demo
    JUC(4)---java线程池原理及源码分析
    JUC(3)---CountDownLatch、CyclicBarrier和AQS
  • 原文地址:https://www.cnblogs.com/maycpou/p/14801751.html
Copyright © 2020-2023  润新知