Vuex $state issue - vue.js

Question

I have error like this:
I previously thought that this is problem with router, but after creating new project with only vuex problem is still there
enter image description here
This is my main.js
import Vue from 'vue'
import App from './App'
import store from './store'
new Vue({
el: "#app",
store,
render: h => h(App)
})
store.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
users: [
{id: 1, name: 'Adrian', email: 'adrian#email.pl'},
{id: 2, name: 'Magda', email: 'magda#email.pl'}
]
}
})
and my component using $store:
<template>
<div class="usersNames">
<ul>
<li v-for="user in usersNames">{{user.name}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'usersNames',
computed: {
usersNames() {
return this.$store.state.users;
}
}
}
</script>

Answer 1

Your examples look like it should work, but I would like to offer a different strategy that I think would be an improvement and should also solve your problem.
Create a getter in your store for the data you're trying to access in your component.
So change your store to this:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
users: [
{id: 1, name: 'Adrian', email: 'adrian#email.pl'},
{id: 2, name: 'Magda', email: 'magda#email.pl'}
]
},
getters:{
users: state => return state.users
}
});
Then, in your component, use that getter to get your users.
<script>
export default {
name: 'usersNames',
computed: {
usersNames() {
return this.$store.getters.users
}
}
}
</script>

Answer 2

you could change main.js:import {store} from './store';

Answer 3

Seems your vuex not inject into vue properly.
Maybe not related to your question, but just for best practice, better use mapState helper;
In your component:
import { mapState } from 'vuex'
export default {
name: 'usersNames',
computed: {
...mapState({
usersNames: 'users'
}),
yourLocalComputed () {}
}
}