Why is getter returning a proxy in Vuex 4 how do I access the actual data?

Viewed 804

I am using vue 3.0.0-0, vuex 4.0.0-0.

I have a simple store.js:

import { createStore } from 'vuex'

export default createStore({
  state: {
    deals: null,
  },

  getters: {
    deals: (state) => {
      return state.deals
    },
  },

  mutations: {
    SET_DEALS: (state, payload) => {
      state.deals = payload
    },
  },

  actions: {
    initDeals: async ({ commit }) => {
      const response = await fetch('http://localhost:3000/deals')
      const data = await response.json()
      commit('SET_DEALS', data)
    },
  },

  modules: {},
})

Now, in my component, I call the action:

import { useStore } from 'vuex'
export default {
  async setup() {
    const store = useStore('store')
    await store.dispatch('initDeals')
    const deals = store.getters.deals
    console.log(deals)
    return {
      deals,
    }
  },
}

For some reason, instead of getting an Array back from the getter, I am getting a Proxy back. This is what it shows in the console as a result of the code above:

Console screenshot

What am I missing? This would work in Vuex 3 (to my recollection). I should get back an Array, but instead I get back this Proxy. In the Target of the proxy, you can see that the Array is there, but not sure how I'm supposed to access that either.

0 Answers
Related