时间戳

首页 > 解决方案 > 具有自定义类 javascript 的 Vuex 无法提交突变

javascript - 具有自定义类 javascript 的 Vuex 无法提交突变

问题描述

这是我第一个使用 vue 和 vuex 的项目。该项目是一个小的销售人员应用程序。

当我介绍我的 javascript 类放置在商店时，问题就来了

当我尝试删除或更新商店时收到 undefined

我的行为是这样的：

export const addProduct = ({ state, commit }, product, variant) => {
  const exists = state.cart.find(i => {
    i.RoaCodart === product.ranCodart;
  });

  if (exists) {
    commit("updateQuantity", product, variant);
  } else {
    commit("addProduct", product, variant);
  }
};

export const removeProduct = ({state, commit}, product)=>{
    console.log('removeProduct ' + product)
    const index = state.cart.findIndex(i => i.RoaCodart === product.RoaCodart);
    commit("removeProduct", index);
};

这是我的突变：

import RigheOrdine from "../store/modules/RigheOrdine.js";

export const addProduct = (state, product, variant) => {
  console.log(variant)
  const row = new RigheOrdine("001", product.ranCodart, variant, product.ranDescri, product.ranPrezz1, "00001", new Date().getDate(), "001", "", "00001");
  row.RoaQuanti = 1; 
  state.cart.push(row);

};

export const updateQuantity = (state, product, variant) => {
  const index = state.cart.indexOf(product);
  let orderItem = state.cart[index];
  if (orderItem !== undefined) orderItem.RoaQuanti++;

  state.cart.splice(index, 1, orderItem); //Object.assign({}, orderItem) ??
};

export const removeProduct = (state, index)=>{
  state.cart.splice(index, 1);
};

因此，每当我尝试检测商店中的产品时，我都会收到未定义的！

import Variants from "./Variants.vue";
export default {
  name: "product-details",
  props: {
    product: {
      type: Object,
      required: true
    }
  },
  components: {
    Variants
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    add(varianti) {
      if(!varianti.length)
       // this.$store.dispatch("addProduct", this.product, '');
        this.$store.dispatch('addProduct', { product, variant });
      else
        varianti.forEach(variant => {
           this.$store.dispatch("addProduct", this.product, variant);
      });
    },
    qty(codart){
       return this.$store.getters.quantity(codart);
     }
  }
};
</script>

标签： javascriptvue.js

解决方案

如果需要多个 Payload，则需要发送 Object 作为第二个参数。看这里

在大多数情况下，有效负载应该是一个对象，以便它可以包含多个字段

// methods
add(varianti) {
  // make sure this.product & varianti exists
  console.log('this.product: ', this.product);
  console.log('varianti: ', varianti);

  if(!varianti.length) {
    this.$store.dispatch('addProduct', { this.product, varianti });
  } else {
    varianti.forEach(variant => {
       this.$store.dispatch("addProduct", this.product, variant);
    });
  }
},

// action
export const addProduct = ({ state, commit }, payload) => {
  // local variable
  const product = payload.product;
  const variant = payload.variant;

  const exists = state.cart.find(i => {
i.RoaCodart === product.ranCodart;
  });

  if (exists) {
    commit("updateQuantity", { product, variant });
  } else {
    commit("addProduct", { product, variant });
  }
};


// mutation
export const addProduct = (state, { product, variant }) => {
  console.log(variant)
  const row = new RigheOrdine("001", product.ranCodart, variant, product.ranDescri, product.ranPrezz1, "00001", new Date().getDate(), "001", "", "00001");
  row.RoaQuanti = 1; 
  state.cart.push(row);

};

export const updateQuantity = (state, { product, variant }) => {
  const index = state.cart.indexOf(product);
  let orderItem = state.cart[index];
  if (orderItem !== undefined) orderItem.RoaQuanti++;

  state.cart.splice(index, 1, orderItem); //Object.assign({}, orderItem) ??
};

推荐阅读