Not able to push new object in array of objects

Question

getting below error

state.products.push is not a function

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
        }
  }

})

Payload has below properties

key: 12 manufacturer: "H & M" price: "12" productDescription: "JAvascript t-shirt by H & M" productName: "Deepraj maurya" quantity: "12"

Added whole index.js file, Please have a look. I am just creating and updating a product

addAllProducts is called by below method:

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

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

Answer 1

Dispatch the data.products

getAllProducts() { axios .get(http://localhost:3000/products) .then((data) => { console.log(typeof data) console.log(data) this.$store.dispatch("addAllProducts", data.products); });.