VUE 笔记 ilovecoding 222 Vuex-actions返回Promise-mapActions

1. actions.js

addCart 方法返回 Promise，可以使用 .then 增加回调函数

  addCart(context, payload) {
    return new Promise((resolve, reject) => {
      // 1. 查找之前数组中是否有该商品
      let oldProduct = context.state.cartList.find(item => item.iid === payload.iid)
      // 2. 判断 oldProduct
      if (oldProduct) {
        context.commit(ADD_COUNTER, oldProduct);
        resolve('该产品数量加1');
      } else {
        payload.count = 1;
        context.commit(ADD_TO_CART, payload);
        resolve('增加了新产品');
      }
    })

2. Detail.vue

导入 mapActions 的 addCart 方法，可以直接通过 this.addCart 调用

  import { mapActions } from 'vuex'

methods: {
      ...mapActions(['addCart']),

        this.addCart(product).then(res => {
          console.log(res)
        })