반응형
app.js:81010 [Vue warn] :마운트된 후크 오류: "ReferenceError: $store가 정의되지 않았습니다."
vuex를 사용하기 위해 코드를 리팩터링하려고 합니다.app.js:81010 [Vue warn]의 2개의 에러가 표시된다.마운트된 후크 오류: "ReferenceError: $store is defined" 및 ReferenceError: $store가 정의되지 않았습니다.vuex는 제대로 Import한 것 같아요.
목표는 vuex를 사용하여 데이터베이스의 직원 데이터로 부트스트랩-vue 데이터 테이블을 업데이트하는 것입니다.
EmployeeDataTable.vue 파일에는getEmployees에 있어서의 방법.methods: {}제가 원하는 것은 이 모든 것을fetchAllEmployeesactions.sufficients로부터의 액션. fetchAllEmployees는 데이터베이스에서 모든 직원을 가져와 결과를 직원에게 저장해야 합니다.employees: []주.
저는 지금 혼란스러워서 이 문제를 해결하기 위해 올바른 방향을 찾는 데 도움이 필요합니다.
이 코드를 모두 보여줘야 할지 모르겠지만 컴포넌트의 흐름을 보여 주고 싶었습니다.
진입점 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 모듈 직원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,
};
App.vue:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
</style>
대시보드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>
컴포넌트 Employee DataTable.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>
사용하다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.
언급URL : https://stackoverflow.com/questions/60806547/app-js81010-vue-warn-error-in-mounted-hook-referenceerror-store-is-not-d
반응형
'itsource' 카테고리의 다른 글
| Android를 통해 Google Maps Directions 실행 (0) | 2022.09.19 |
|---|---|
| 쿼리에서 MySQL은 ORDER BY 및 LIMIT을 어떻게 처리합니까? (0) | 2022.09.19 |
| 단순히 함수 반환값을 캐시할 수 있는 데코레이터가 있나요? (0) | 2022.09.19 |
| MySQL 서비스 창 중지 (0) | 2022.09.19 |
| 정수에서 BigInteger로 변환 (0) | 2022.09.19 |