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:

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.