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

【问题标题】：Pass data from Vue Component to Vuex store将数据从 Vue 组件传递到 Vuex 存储
【发布时间】：2021-01-20 06:14:50
【问题描述】：

我有以下 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作为一个prop传递到了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 中定义？

【问题讨论】：

尝试async getContractorMaintenances ({ commit },contractor_user_id) 使contractor_user_id 在外面检查
你需要传递数据this.getContractorMaintenances(contractor_user_id)这个函数只有你会得到数据

标签： javascript laravel vue.js vuex

【解决方案1】：

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

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

在挂载周期中应该是这样的

this.getContractorMaintenances(this.contractor_user_id);

【讨论】：