【发布时间】：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 的重要性）
标签： javascript arrays vue.js vuex javascript-objects