VUEX does not find a mutation but it is defined

Question

I'm working with VUEX and everything was fine until I registered a new mutation "shipping" since every time I commit it tells me: unknown mutation type: shipping. But I do not understand the reason since the previous mutations work correctly.

This is my code:

mutations:

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

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

Component:

Template:

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

Scripts:

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)
      }
   }
}

blaz blaz · Accepted Answer · 2019-06-04T04:08:51

You might call your mutation wrong. If this line is correct:

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

Then the function updateCost should be:

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

if in your module you did set namespacing to true. Or the function can be

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

since you already use mapMutations to map shipping to your component.

VUEX does not find a mutation but it is defined

1 Answers