使用VueJS和Vuex中的状态时，React性不起作用

nuypyhwy 于 2022-12-14 发布在 Vue.js

关注(0)|答案(1)|浏览(104)

我有一个增量字段，我做的每件事都正确。更新vue dev tols中的状态，等等...但是它不更新值我已经试过所有的方法了，但是在这种情况下没有React。

我将留下VUEX代码的一部分，看看它是否有帮助：

export default {
  namespaced: true,
  state: {   
    productsInBag: []
  },  
  mutations: {     
    ADD_TO_BAG(state, product) {
      state.productsInBag.push(product);
      localStorage.setItem("productsInBag", JSON.stringify(state.productsInBag))
    },
    REMOVE_FROM_BAG(state, productId) {
      let updatedBag = state.productsInBag.filter(item => productId != item.id)
      state.productsInBag = updatedBag     
    },
    DECREASE_PRODUCT(state, product) {     
      let itemIndex = state.productsInBag.findIndex(x => x.id === product.id)       
      state.productsInBag[itemIndex].quantity--   
    },
    INCREASE_PRODUCT(state, productId) {
      state.productsInBag.find(item => item.id === productId).quantity++      
    }
      
  },
  actions: {
    addToBag ({ commit }, payload) {          
      commit('ADD_TO_BAG', payload.product)
    },
    removeFromBag ({ commit }, payload) {
      if (confirm('Você quer remover este produto do carrinho ?')) {
        commit('REMOVE_FROM_BAG', payload.product.id)
      }      
    },
    decreaseProduct ({ commit }, payload) {
      commit('DECREASE_PRODUCT', payload.product)
    },
    increaseProduct ({ commit }, payload) {
      commit('INCREASE_PRODUCT', payload.product.id)
    }
  },
  getters: {
    getProductsInBag(state) {
        return state.productsInBag
    },   
  } 
}

我还将留下一部分组件代码：
x一个一个一个一个x一个一个二个x
在Vue Devtools中，状态可以完美运行。

如果你能帮我的话就太好了。我已经找了6个小时了。

vue.js

来源：https://stackoverflow.com/questions/74724060/reactivity-doesnt-work-using-state-in-vuejs-and-vuex

1条答案

按热度按时间

5rgfhyps1#

Vue. set是一个工具，它允许我们向已经React的对象添加新属性，并确保这个新属性也是React的。

因此，根据您的问题，Vue.set将很适合您。

Vue.set(state.productsInBag, itemIndex, product)

可选-

另外，通过查看小提琴的代码，您可以在帮助器文件中创建一个通用函数来查找产品的索引，就像他的-

export const findByIndex = (arr, matcher) => {
 return arr.findIndex(item => item.id === matcher)
}

并将此函数导入js文件，如下所示-

import { findByIndex } from "YOUR_HELPER_FILE_PATH"

现在，变异可以像这样使用-

DECREASE_PRODUCT(state, product) {     
  let itemIndex = findByIndex(state.productsInBag, product.id)
  if(itemIndex != -1) {
    product.quantity--
    Vue.set(state.productsInBag, itemIndex, product)
  }
},

INCREASE_PRODUCT(state, product) {    
  let itemIndex = findByIndex(state.productsInBag, product.id)
  if(itemIndex != -1) {
    product.quantity++
    Vue.set(state.productsInBag, itemIndex, product)
  }
}

"一点小提示-"
我们可以创建一个单一的突变方法来代替两个突变方法，它可以接受对象中的product_id和operation（增加或减少），如下所示-

UPDATE_PRODUCT(state, payload) {
  // payload is an object which will have some data
  let itemIndex = findByIndex(state.productsInBag, payload.product_id)
  if(itemIndex != -1) {
    payload.operation == 'increase' ? product.quantity-- : product.quantity++;
    Vue.set(state.productsInBag, itemIndex, product)
  }
}

赞(0）回复(0）举报 2022-12-14

我来回答

使用VueJS和Vuex中的状态时，React性不起作用

1条答案

相关问题

热门标签

最新问答