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中定义的方法
    }
  }
原文地址:https://www.cnblogs.com/maycpou/p/14801751.html