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?

Answer 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);