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

Posted 2023-02-22

【中文标题】在 Laravel 中对 vuejs 文件的 Vuex 调用函数

【英文标题】：Vuex call function to vuejs file in Laravel

【发布时间】：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>

【参考方案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