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

Question

我正在与 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)
      }
   }
}

Answer 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 映射到您的组件。