Vuex Laravel 加载所有数据

Posted 2023-02-22

【中文标题】Vuex Laravel 加载所有数据

【英文标题】：Vuex Laravel Loads all data

【发布时间】：2021-09-06 17:44:19

【问题描述】：

我在登录时一直在尝试加载所有数据。目前，我只能通过 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

Login.vue

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

</script>

这是我的 vuedevtools 的样子

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

【参考方案1】：

如果您使用的是 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

【讨论】：

感谢您的回复，我应该使用突变吗？而不是行动？老实说，我是 vuex 的新手

你绝对应该同时使用这两个。我刚刚意识到您遇到问题是因为您没有突变。我会更新我的评论

感谢您的解决方案，但有一件事我怎样才能调用结果或显示开发工具函数 load employee() ？

您应该创建一个新问题，因为您的代码没有显示您当前的操作方式，它不得不说。如果此问题已解决或您发现我的问题有用，请随时投票或将其标记为解决方案。

是的，它很有用，但是我一直想知道通过上面的代码如何知道我是否将数据传递给 vue 文件？