Pass data from Vue Component to Vuex store

Question

I have the following Laravel api route

Route::get('c/maintenances/{contractor_user_id}', 'Maintenance\Api\ApiContractorMaintenanceController@index');

The contractor_user_id is dynamic and got from the database. I want to use it to get the resource collection returned by that particular contractor using the Vuex store

async getContractorMaintenances ({ commit, contractor_user_id }) {
            let response = await axios.get(`/api/c/maintenances/${contractor_user_id}`)
            commit('PUSH_CONTRACTOR_MAINTENANCES', response.data.data)
        }

but the contractor_user_id is returning undefined when I console.log it


 async getContractorMaintenances ({ commit, contractor_user_id }) {
          

             console.log(`${contractor_user_id}`);

         }

I have passed the contractor_user_id as a prop in the vue component

<script>
import { mapGetters, mapActions } from 'vuex'
import axios from 'axios'

export default {
    props: {
        contractor_user_id: {
            required: true,
            type: String
        }
    },

       computed: {
        ...mapGetters({
            contractor_maintenances: 'maintenance/contractor_maintenances',
        })


    },

    methods: {
        ...mapActions({
            getContractorMaintenances: 'maintenance/getContractorMaintenances',
        }),

    },

    mounted () {
        this.getContractorMaintenances()
    }
}
</script>

How do I get the contractor_user_id to be passed on and be defined in Vuex?

try async getContractorMaintenances ({ commit },contractor_user_id) make contractor_user_id outside and check — Kamlesh Paul
– Kamlesh Paul, Commented Oct 5, 2020 at 11:24
you need to pass data this.getContractorMaintenances(contractor_user_id) this function then only you will get data — Kamlesh Paul
– Kamlesh Paul, Commented Oct 5, 2020 at 11:25

Elvaleryn · Accepted Answer · 2020-10-05 11:54:55Z

1

You need to pass that id in mounted cycle of vue which means your action should be like:

async getContractorMaintenances ({ commit }, contractor_user_id) {
//code 
}

and in mount cycle it should be like

this.getContractorMaintenances(this.contractor_user_id);

answered Oct 5, 2020 at 11:54

Elvaleryn

3614 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass data from Vue Component to Vuex store

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related