How to use Vuex 4 state data inside Vue 3 component as payload for another dispatch?

Question

I Am using Vue 3 Composition API and useStore hook from Vuex 4

This is how I am getting data (ids) from vuex store inside setup()

    setup () {
                const store = useStore()    
                const allIds = computed(() => store.state.ids)               
    
            function printIds () {
                console.log(allIds.value)
               }
             //...
         }

Problem is I am not able to use allIds array as it's wrapped in Proxy. This is what I get on console.log(allIds.value) -

When I use this array in templates it works fine, but I want to use this data as payload for another action dispatch inside component using 1 of the ids from array. How can I do that? All examples I found are for using store data in templates.

Thanks.

Dan Dan · Accepted Answer · 2021-02-21T11:31:30

The proxy won't prevent you from using the data as a payload, you just need to use the .value property and access the data correctly from there.

The allIds variable is an object with an array in its pads property. So to pass the first item in the array, for example:

const store = useStore()    
const allIds = computed(() => store.state.ids)               
    
store.dispatch('actionName', allIds.value.pads[0]);

store

actions: {
  actionName({ commit }, payload) {
    console.log(payload);
  }
}

How to use Vuex 4 state data inside Vue 3 component as payload for another dispatch?

1 Answers