我想用数据库中的数据填充我的boots-vue表。我正在使用vuex尝试实现这一目标;但是,出于某种原因,bootstrap-vue表未获取数据。我检查了Vuex开发工具:
我在组件中添加了console.log('Getters: ' + this.$store.getters.allEmployees);
,以查看将检索的内容,并且仅将Getters:输出到控制台。
为了进一步解决这个问题,我将[{"id":1,"name":"Jane Smith","email":"[email protected]","job_title":"Lead"},{"id":2,"name":"John Smith","email":"[email protected]","job_title":"Installer"}]
硬编码为employees
状态,现在将数据加载到表中。
Vuex模块employees.js
const state = {
employees: [],
employeesStatus: null,
};
const getters = {
allEmployees: state => {
return state.employees;
},
};
const actions = {
fetchAllEmployees({commit, state}) {
commit('SET_EMPLOYEES_STATUS', 'loading');
axios.get('/api/employees')
.then(res => {
commit('SET_EMPLOYEES', res.data);
//console.log(state.employees);
commit('SET_EMPLOYEES_STATUS', 'success');
})
.catch(error => {
commit('SET_EMPLOYEES_STATUS', 'error');
});
},
};
const mutations = {
SET_EMPLOYEES(state, employees) {
state.employees = employees;
},
SET_EMPLOYEES_STATUS(state, status) {
state.employeesStatus = status;
}
};
export default {
state, getters, actions, mutations,
};
VueJS组件EmployeeDataTable.vue:
<template>
<div class="overflow-auto pb-3" style="background: white; ">
<b-card
header="Employees"
header-tag="header"
>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table
id="employee-table"
ref="employee-table"
:items="items"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
</b-card>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: "EmployeeDataTable",
data() {
return {
perPage: 3,
currentPage: 1,
items: [],
}
},
computed: {
...mapGetters(['allEmployees']),
rows() {
return this.items.length
}
},
methods: {
getEmployees() {
this.$store.dispatch('fetchAllEmployees').then(() => {
this.items = this.$store.getters.allEmployees;
console.log('Getters: ' + this.$store.getters.allEmployees); //<-Returns Getters:
});
//this.items = this.$store.getters.allEmployees;
}
},
mounted() {
this.getEmployees();
}
}
</script>
Phil的解释达到了目的。我更改的代码段是:
const actions = {
fetchAllEmployees({commit, state}) {
commit('SET_EMPLOYEES_STATUS', 'loading');
return axios.get('/api/employees')
.then(res => {
commit('SET_EMPLOYEES', res.data);
//console.log(state.employees);
commit('SET_EMPLOYEES_STATUS', 'success');
})
.catch(error => {
commit('SET_EMPLOYEES_STATUS', 'error');
});
},
};
和
<b-table
id="employee-table"
ref="employee-table"
:items="allEmployees"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>