无法在对象数组中推送新对象

Posted 2023-02-22

【中文标题】无法在对象数组中推送新对象

【英文标题】：Not able to push new object in array of objects

【发布时间】：2020-10-11 06:24:00

【问题描述】：

遇到错误

state.products.push 不是函数

import Vue from 'vue'
import Vuex from 'vuex'
const URL =  "http://localhost:3000/products"
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store(
  state: 
    products: [],
    success: null,
    error: null
  ,
  mutations: 
    setAllProducts(state,payload)
      state.products =  payload
    ,
    createAProduct(state, payload) 
      const newProduct = payload
      console.log(typeof state.products)
      console.log(state)
      state.products.push(newProduct)
      
    ,
    setSuccess (state , payload) 
      state.success = payload
    , 
    setError (state, payload) 
      state.error = payload
    ,
    updateAProduct(state,payload) 
      for( let product in state.products)
      
        if(product.id == payload[1])
        
        product.productName=  payload[0].productName,
        product.productDescription =  payload[0].productDescription,
        product.manufacturer =  payload[0].manufacturer,
        product.price = payload[0].price,
        product.quantity = payload[0].quantity
        
      
    
  ,
  actions: 
    addNewProduct( commit , payload) 
      const product = 
        productName: payload.productName,
        productDescription: payload.productDescription,
        manufacturer: payload.manufacturer,
        price: payload.price,
        quantity: payload.quantity,
      
      axios.post(`$URL`, product)
      .then((data) =>
        let key =  data.id
        commit('createAProduct',...product,key)
        commit('setSuccess', `$data.data.productName is added to Products` )
      )
      .catch((error) =>
        console.log(error)
        commit('setError', error )
      
      )
    ,
    updateProduct(commit, payload)
    
      const product =  
        productName: payload[0].productName,
        productDescription: payload[0].productDescription,
        manufacturer: payload[0].manufacturer,
        price: payload[0].price,
        quantity: payload[0].quantity,
      
      axios.put(`$URL/$payload[1]`,product)
      .then((data)=>
        commit('updateAProduct', payload)
        commit('setSuccess', `$data.data.productName is updated successfully` )
      )
      
    ,
    addAllProducts( commit , payload)
    
      commit('setAllProducts',payload)
    
  ,
  getters:
    success (state) 
            return state.success
        ,
        error (state) 
            return state.error
        
  

)

有效负载具有以下属性

键：12 制造商：“H&M” 价格：“12” productDescription: "H & M javascript t 恤" 产品名称：“Deepraj maurya” 数量：“12”

添加了整个 index.js 文件，请查看。我只是在创建和更新产品

addAllProducts 通过以下方法调用：

 getAllProducts() 
      axios
        .get(`http://localhost:3000/products`)
        .then((data) => 
          console.log(typeof data)
          console.log(data)

          this.$store.dispatch("addAllProducts", data);
        );

【问题讨论】：

定义“不能”。你说的是不可能的，所以这是合乎逻辑的XY problem

现在可以了吗，请帮忙

我假设您使用的是 vuex。调用 state.products.push 之前的状态是什么？

是的，我正在使用 Vuex，state.products 的类型正在显示对象，是否可能，应该是数组吧？

typeof 数组打印对象。您应该只使用 console.log(state.products) （对于文化，您可以使用 Array.isArray）。我会暗示 products 甚至不是您状态的变量，并且您错误地复制了您的代码 sn-p 或其他东西（因此 minimal reproducible example 的重要性）

【参考方案1】：

发送 data.products

getAllProducts() axios .get(http://localhost:3000/products) .then((数据) => console.log（数据类型） 控制台日志（数据） this.$store.dispatch("addAllProducts", data.products); );.