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

时间:2020-10-05 11:21:02

标签: javascript laravel vue.js vuex

我有以下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返回的是不确定的


 async getContractorMaintenances ({ commit, contractor_user_id }) {
          

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

         }

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

<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中进行定义?

1 个答案:

答案 0 :(得分:1)

您需要在安装的vue周期中传递该ID,这意味着您的操作应类似于:

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

在安装周期中应该像

this.getContractorMaintenances(this.contractor_user_id);