Level 104
Where do you new up the Store? I would expect the following that (given you import directly into the Vue instance from your store file, that you Vue.use(Vuex) and new Vuex.Store(...) in there????
Jun 1, 2020
9
Level 4
Cannot read property 'getters' of undefined
'getters' of undefined my code
todo.vue
<template>
<div>
<h3>Todos</h3>
<div class="todos">
<div v-for="todo in allTodos" :key="todo.key" class="todo">
{{ todo.title }}
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: 'Todos',
computed: mapGetters(["allTodos"]),
};
</script>
<style>
.todos {
border: 1px solid #ccc;
background: #41b883;
padding: 1rem;
border-radius: 5px;
text-align: center;
position: relative;
cursor: pointer;
}
</style>
vuex js
//import axios from 'axios';
const state = {
todos: [
{
id:1,
title: 'Todo One'
},
{
id:2,
title: 'Todo two'
},
]
};
const getters = {
allTodos:(state) => state.todos
};
const actions = {};
const mutations = {};
export default {
state,
getters,
actions,
mutations
};
main.js
import Vue from 'vue';
import App from '~/App.vue';
import Store from '~/store';
import 'bootstrap';
var $ = require("jquery");
window.jQuery = $;
Vue.config.productionTip = false;
new Vue({
Store,
render: (h) => h(App),
}).$mount('#app');
Level 4
in index.js (store)
import Vuex from 'vuex';
import Vue from 'vue';
import todos from './modules/todos';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
todos
}
});
Level 104
Okay, so the todos module is exposing getters and these are in the global namespace?
The only other thing that appears differently to my typical implementations is this
computed: mapGetters(["allTodos"]),
Does this work; is it the same end result as:
computed: {
...mapGetters(["allTodos"]),
}
Level 4
thanks for replay but error remain same
Level 104
What does the Store look like in your Vue devtools? Is it correctly initialised?
Level 4
Giving me following output on vue devtool (vuex getters and state) witch is correct
{"todos":{"todos":[{"id":1,"title":"Todo One"},{"id":2,"title":"Todo two"}]}}
Level 104
Is this simply a case of case?
new Vue({
store: Store,
render: (h) => h(App),
}).$mount('#app');
But then, the Vuex store would not be properly initialized, right?
1 like
Level 4
thanks issue solve
Level 1
@tarang19 I'm facing the same issue Can you tell what is the solution??
Please or to participate in this conversation.