状态对 Vuex 没有反应答案

【问题标题】：State not reactive with Vuex状态对 Vuex 没有反应
【发布时间】：2021-02-21 03:10:40
【问题描述】：

当我单击时，我试图在 Vuex 中减少或增加购物车，但直到我重新渲染组件或在 Vue 的开发工具中再次单击“提交”后，更改才会反映出来。

我的商店是什么样子的：

状态

state: {
  toggleSideBar: false,
  cart: [],
},

动作

action:{
  incrementCart: ({ commit }, payload) => {
  commit("INCREMENT_CART", payload);
},
 addToCart: ({ commit, state }, payload) => {
      commit("ADD_TO_CART", payload);
    },
}

突变

mutation:{
INCREMENT_CART(state, payload) {
  let index = state.cart.findIndex((x) => x.id === payload);
  state.cart[index].amount += 1;
},
  ADD_TO_CART(state, payload) {
      let amount = 1;
      if (state.cart.length === 0) {
        payload.amount = amount;
        return state.cart.push(payload);
      } else {
        if (state.cart.some((cart) => cart.id === payload.id)) {
          let index = state.cart.findIndex((x) => x.id === payload.id);
          state.cart[index].amount += amount;
        } else {
          payload.amount = amount;
          state.cart.push(payload);
        }
      }
    },
}

然后在我的组件中

computed: {
  cartData() {
    return this.$store.state.cart;
    console.log(this.$store.state.cart);
  },
}

然后将值作为道具传递给单个购物车

【问题讨论】：

carData() 是在计算中还是在方法中？你能把更多的代码格式化吗？
请检查这个答案stackoverflow.com/questions/63404747/…
您遇到了反应性问题：如果 index 的商品在购物车中不存在，那么您不能这样设置：您需要使用 Vue.set
Vue.set(state.cart, index, {...state.cart, amount : state.cart.amount +1})
@robert 这会发生突变吗？如果是，我做了并且仍然得到相同的结果；我还在上面的问题中添加了新项目，关于 ADD_TO_CART 突变，也许这可能是我问题的根源

标签： javascript vue.js vuex

【解决方案1】：

你需要像这样在你的 Vuex 中创建一个 getter：

getters: {
    getCart(state) {
        return state.cart;
    }
}

然后在您的计算中，您需要像这样调用您的 getter：

import { mapGetters } from 'vuex';

export default {
    
    computed: {
        ...mapGetters(['getCart']);
    }
}

最后在你的 html 标签中，你需要像这样调用你的 getter：

<div v-for="item in getCart">item.quantity</div>

【讨论】：