首页 > 解决方案 > Vuex Laravel 加载所有数据

问题描述

登录时,我一直在尝试加载所有数据。目前,我只能通过 vuex 文件通过控制台显示数据。我只是想实现这一点,因为它在登录时加载所有数据的地方,我更容易调用每个页面上的每个函数。

我认为第一步是在vue devtools上显示它?

这是我尝试过的。我的“./store/modules/currentUser.js”上有这个文件

import axios from "axios";
const state = {
};
const getters = {};
const actions = {
    loadEmployee({}){
        axios.post(BASE_URL + '/transportation/driver/autoComplete').then(response => {
            console.log(response.data); // how to pass result to devtools?
        });
    }
};
const mutations = {};

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

}

登录.vue

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

这是我的 vuedevtools 看起来像

在此处输入图像描述

我想获取 listdata 数组 vue devtools 上的所有数据

在此处输入图像描述

标签: phplaravelvue.jsvuex

解决方案


如果您使用的是 vuex,您可能应该在开发工具中加载状态。

在此处输入图像描述

但是,您的问题是由于没有突变引起的,因此您永远不会更新状态。

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)
        });
    }
};
const mutations = {
    setTransportDrivers: (state, drivers) => {
        state.transansportDrivers= drivers;
    },
};

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

推荐阅读