将数据从 Vue 组件传递到 Vuex 存储

Question

我有以下 Laravel api 路线

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

contractor_user_id是动态的，从数据库中获取。 我想用它来获取该特定承包商使用 Vuex 商店返回的资源集合

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

但是当我 console.log 时， contractor_user_id返回 undefined

 async getContractorMaintenances ({ commit, contractor_user_id }) {
          

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

         }

我已经通过了contractor_user_id作为vue组件中的道具

<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>

如何让contractor_user_id 被传递并在Vuex 中定义？

Answer 1

您需要在 vue 的挂载循环中传递该 id，这意味着您的操作应该是这样的：

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

在安装周期中它应该像

this.getContractorMaintenances(this.contractor_user_id);