状态对 Vuex 没有反应

Posted 2023-02-22

【中文标题】状态对 Vuex 没有反应

【英文标题】：State not reactive with 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() 是在计算中还是在方法中？你能把更多的代码格式化吗？

请检查这个答案***.com/questions/63404747/…

您遇到了反应性问题：如果 index 的商品在购物车中不存在，那么您不能这样设置：您需要使用 Vue.set

Vue.set(state.cart, index, ...state.cart, amount : state.cart.amount +1)

@robert 这会发生突变吗？如果是，我做了并且仍然得到相同的结果；我还在上面的问题中添加了新项目，关于 ADD_TO_CART 突变，也许这可能是我问题的根源

【参考方案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>