VUEX 没有找到突变，但它被定义了

Posted 2023-02-23

【中文标题】VUEX 没有找到突变，但它被定义了

【英文标题】：VUEX does not find a mutation but it is defined

【发布时间】：2019-10-19 13:35:18

【问题描述】：

我正在与 VUEX 合作，一切都很好，直到我注册了一个新的突变“运输”，因为每次我提交它都会告诉我：未知突变类型：运输 .但我不明白原因，因为以前的突变工作正常。

这是我的代码：

变异：

export function removeAllProducts (state)
    state.cart = []


export function shipping(state, cost)
    state.cart.shipping = cost;
;

组件：

模板：

<input type="number" name="cost" :value="shippingCost" @input="updateCost">

脚本：

computed: 
   ...mapState( 'cart', ['cart'] ),
   ...mapGetters('cart', ['totalItems', 'totalCost', 'shippingCost']),
    shippingCost:
      get() return this.$store.getters.shippingCost; ,
     
,



     methods: 
     ...mapMutations('cart', ['addProductToCart', 'subtractProductToCart', 'removeProductFromCart', 'removeAllProducts', 'shipping' ]),
     ...mapMutations('routes', ['addRoute']),

      updateCost (e) 
        this.$store.commit('shipping', e.target.value)
      
   

【参考方案1】：

你可能认为你的突变是错误的。如果这行是正确的：

...mapMutations('cart', ['addProductToCart', 'subtractProductToCart', 'removeProductFromCart', 'removeAllProducts', 'shipping' ])

那么函数updateCost应该是：

  updateCost (e) 
    this.$store.commit('cart/shipping', e.target.value)
  

如果在您的模块中您确实将 namespacing 设置为 true。或者函数可以是

  updateCost (e) 
    this.shipping(e.target.value)
  

因为您已经使用mapMutations 将shipping 映射到您的组件。

【讨论】：

谢谢。有了您的建议，我不再有错误，但该州也没有任何反应。在功能 shipping (state, cost) 中的 mutation.js 中，我指出以下内容： state.cart.shipping = cost;但它什么也没做：/

@OscarDev 在继续之前，我需要指出您的突变有一些冲突。在突变方法removeAllProducts 中，您设置了state.cart=[]，但在shipping 中，您想要更新state.cart.shipping，如果cart 是一个数组，这显然没有意义。这两个突变中至少有一个是错误的，或者两者都有。

removeAllProducts 工作没有问题，我插入它只是为了理解我已经正确使用 VUEX

要找出答案，您可以尝试将console.log 放入您的变异中，以查看您的变异是否被调用，以及更新后的状态如何。但这部分与您的原始问题无关，因此如果您需要帮助，请创建另一个问题。我不会更新我的答案。

removeAllProducts 我想清空购物车时使用的产品