app.js：81010 [Vue 警告]：挂钩错误："ReferenceError: $store is not defined"

Question

我正在尝试重构代码以使用vuex。我收到两个错误：app.js:8110[Vue warn]：挂载钩子中的错误："ReferenceError:$store未定义"和ReferenceError:$store尚未定义。我认为我正确地进口了vuex。

我的目标是使用vuex用数据库中的员工数据更新我的引导程序vue数据表。

在EmployeeDataTable.vue文件中，我在methods: {}中有一个getEmployees方法，我希望它从employees.js中调度fetchAllEmployees操作。fetchAllEmployees应该从数据库中获取所有员工，并将结果保存到employee.jsemployees: []状态。

我现在很困惑，需要帮助朝着正确的方向解决这个问题。

我不知道是否需要显示所有这些代码，但我想显示组件的流程。

入口点App.js:

import Vue from 'vue';
import store from './store';
import router from './router';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import App from './components/App';

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
require('./bootstrap');
const app = new Vue({
el: '#app',
components: {
App,
},
router,
store,
});

Vuex Store index.js:

import Vue from 'vue';
import Vuex from 'vuex';
import Employees from './modules/employees';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
Employees,
}
});

Vuex模块employees.js:

const state = {
employees: [],
employeesStatus: null,
};
const getters = {
allEmployees: (state) => state.employees
};
const actions = {
fetchAllEmployees({commit, state}) {
commit('setPostsStatus', 'loading');
axios.get('/api/employees')
.then(res => {
commit('employees', res.data);
commit('employeesStatus', 'success');
})
.catch(error => {
commit('setEmployeesStatus', 'error');
});
},
};
const mutations = {
setEmployees(state, employees) {
state.employees = employees;
},
setEmployeesStatus(state, status) {
state.employeesStatus = status;
} 
};
export default {
state, getters, actions, mutations,
};

应用程序：

<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
</style>

DashBoard.vue:

<template>
<div>
<b-container>
<b-row>
<b-col class="col-12 col-sm-12 col-md-5 col-lg-4 col-xl-4">
<b-list-group class="d-flex horiz mx-5">
<b-list-group-item class="list-group-item-padding">
<b-link v-on:click="component='home'">
<i class="fas fa-home"></i>
<span class="custom-sm-d-none">Home</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="list-group-item-padding">
<b-link v-on:click="component = 'projects'">
<i class="fas fa-project-diagram"></i>
<span class="custom-sm-d-none">Projects</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="list-group-item-padding">
<b-link v-on:click="component = 'employees'">
<i class="fas fa-user"></i>
<span class="custom-sm-d-none">Employees</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="list-group-item-padding">
<b-link v-on:click="component = 'customers'">
<i class="fas fa-users"></i>
<span class="custom-sm-d-none">Customers</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="list-group-item-padding">
<b-link v-on:click="component = 'batch-create-material-list'">
<i class="fas fa-toolbox"></i>
<span class="custom-sm-d-none">Materials</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="">
<b-link v-on:click="component = 'product-list'">
<i class="fas fa-clipboard-list icon-5x"></i>
<span class="custom-sm-d-none">Tasks</span>
</b-link>
</b-list-group-item>
</b-list-group>
</b-col>
<b-col class="col-12 col-md-7 col-lg-8 col-xl-8">
<keep-alive>
<component v-bind:is="component"></component>
</keep-alive>
</b-col>
</b-row>
</b-container>
</div>       
</template>
<script>
import Home from '../../components/admin/Home';
import Projects from '../../components/admin/Projects';
import Employees from '../../components/admin/Employees';
import Customers from '../../components/admin/Customers'
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';

export default {
name: 'Dashboard',
components: {
'home': Home,
'projects': Projects,
'employees': Employees,
'customers': Customers,
'product-list': ProductList,
'batch-create-material-list': CreateProductAndCategory,
},
data() {
return {
component: 'product-list',
}
},

}
</script>
<style scoped>
/* small screen  below 768px width */
@media only screen and (max-width : 691px) { 
.custom-sm-d-none{display:none;}
.horiz {
flex-direction: row;
justify-content: space-evenly;
padding-bottom: 10px;
}
.list-group-item-padding {
margin-right: 10px;
}
}
</style>

组成部分员工.vue：

<template>
<div>
<EmployeeDataTable/>
<CreateEmployee />
</div>
</template>
<script>
import EmployeeDataTable from "./EmployeeDataTable"
import CreateEmployee from "./CreateEmployee"
export default {
components: {
EmployeeDataTable,
CreateEmployee,  
},
}
</script>
<style scoped>
</style>

组件使用数据表.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() {
$store.dispatch('fetchAllEmployees').then(() => {
console.log('Dispatched getEmployees method!');
});
}
},
mounted() {
this.getEmployees();
}
}
</script>

Answer 1

在组件中使用this.$store而不是$store。将API调用更改为：

axios.get('/api/employees')
.then(res => {
commit('setEmployees', res.data);
commit('setEmployeesStatus', 'success');
})
.catch(error => {
commit('setEmployeesStatus', 'error');
});

现在的区别在于，你在给突变命名。在你的成功承诺中，你有州名而不是突变。

人们在Vuex中使用的一个常见惯例是用所有大写字母命名突变，在这种情况下，这可能会有所帮助(如果你使用州名，这会更明显(。您可以将它们重命名为SET_EMPLOYEES和SET_EMPLOYEES_STATUS。