CODEWITHSUNDEEP
vuexquasar
kentforth
kentforth

Reputation: 517

Why vuex return object instead of array in Quasar App?

I have Quasar App I connected vuex I created a separate file as module for vuex like this: I created an empty array in vuex If I open Vue extension in browser I see that vuex return object where an array is stored instead of just an array

Vuex

How can I store just an array instead of object?

I created a vuex file like this:

vuex fle

in store/index.js file I imported cars.js file:

import Vue from 'vue'
import Vuex from 'vuex'
import cars from "src/store/module-example/cars";

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
     cars
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEBUGGING
  })

  return Store
}

Cars.js file:

import axios from "axios";

const state = {
  cars: []
}

const mutations = {
  SET_CARS: (state, cars) => {
    state.cars = cars;
  }

}
const actions = {
  async GET_ALL_CARS_FROM_API({commit}) {
    let result = await axios.get('http://localhost:8050/api/cars');
    commit("SET_CARS", result.data)

  }
}

const getters = {
  GET_ALL_CARS: (state) => {
    return state.cars;
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

Upvotes: 0

Views: 130

Answers (1)

Dvdgld
Dvdgld

Reputation: 2164

result.data is an object. In order to set cars to a plain array just set it to result.data.cars

commit("SET_CARS", result.data.cars)

Upvotes: 1

Related Questions