Mutation 不会更新 VUEX 中的 store [英] Mutation does not update the store in VUEX

问题描述

使用 VUEX 我正在尝试更新商店，但我没有实现，我不明白原因，因为我只想输入数字数据而没有任何复杂性.在突变中，通过控制台输入消息，然后我收到它们成功，但在购物车状态下没有任何反应.

Working with VUEX I am trying to update the store but I do not achieve it, I do not understand the reason since I only want to enter a numerical data without any complications.In the mutation enter messages by console and I receive them successfully but nothing happens in the state of cart.

这是我的代码:

Mutations.js

export function shipping(state, cost) {
    state.cart.shipping = cost;
    console.log(cost);
    console.log('hello from mutation');
}

模板:

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

方法

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

    updateCost(event) {
      this.$store.commit('cart/shipping', event.target.value)
    },

计算

computed: {
   ...mapState( 'cart', ['cart'] ),
   ...mapGetters('cart', ['totalItems', 'totalCost']),
   ...mapGetters('cart', ['shippingCost']),

  shippingCost() {
    return this.$store.getters.shippingCost;
  }
}

推荐答案

解决了，必须使用VUEX作为对象才能访问更多元素:

Solved, we must use VUEX as an object to be able to access more elements:

非常重要

const namespaced = true;  //important!!

export default {
    namespaced,
    state,
    mutations
}

状态:

export default {
    cart: {
        products: [], 
        shipping : ''
    }
}

并以这种方式输入您的数据:

And enter your data in this way:

computed: {
   ...mapState( 'cart', ['cart', 'products', 'shipping'] ),

问候

这篇关于Mutation 不会更新 VUEX 中的 store的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！