在 Laravel 中对 vuejs 文件的 Vuex 调用函数答案

【问题标题】：Vuex call function to vuejs file in Laravel在 Laravel 中对 vuejs 文件的 Vuex 调用函数
【发布时间】：2021-09-07 12:34:24
【问题描述】：

我在登录时一直在尝试加载所有数据。目前，我只能通过 vuex 文件通过控制台显示数据。我只是想实现这一点，因为它在登录时加载所有数据的地方，我更容易调用每个页面上的每个函数。问题是如何将数据传递给 vue js 文件？或者我认为第一步是在 vue devtools 上显示它？如果有人能弄清楚，那就太好了，在此先感谢您！

"./store/modules/currentUser.js"

import axios from "axios";
const state = {
    transansportDrivers: [] 
};
const getters = {};
const actions = {
    loadEmployee({}){
        axios.post(BASE_URL + '/transportation/driver/autoComplete').then(response => {
            commit('setTransportDrivers', response.data)
            console.log(response.data); 
        });
    }
};
const mutations = {

    setTransportDrivers: (state, drivers) => {
        state.transansportDrivers= drivers;
    },
};

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

vuejs 文件我想在这个脚本中显示 response.data 的结果，但是它不起作用

<script>
export default {
    data () {
        return {
            listdata:[]
        }
    },
    methods: {
        login() {
            this.$store.dispatch('currentUser/loadEmployee', this.listdata);
        }
    }
}
</script>

【问题讨论】：

标签： php laravel vue.js vuex

【解决方案1】：

您需要从商店中获取“transansportDrivers”，以使其在您的 vue 文件中可用。您为此使用 mapState

【讨论】：

感谢您的回复，但它看起来如何？老实说，我是 vuex 的新手
你必须从 vuex 导入 mapstate，像这样： import {mapState} from 'vuex'。然后，在计算中包含 ...mapState(['transansportDrivers'])。然后，它应该在您的 vue 文件中可用
谢谢你的回复，是这个样子的吗？我已经在 vuex 文件夹中的 index.js image 中导入 mapstate，并在 vue 文件 image 中将其称为控制台，但它不起作用 mapstate is undefined
将它导入到您希望状态可用的 Vue 实例/组件中。在上面的代码中，假设你希望它在包含脚本的文件中，你可以这样做：
我在here 上写了一个答案。也许它会帮助你指出正确的方向@ShainnahJane