Level 50
u need to define store inside vue instance. something like below:
import store from './vuex'
const app = new Vue({
el:'#app',
store: store
})
Aug 28, 2018
8
Level 2
Vuex - passing state to components.
Hey guys,
I am having trouble passing the state to my components. Currently, my files run look this:
-store.js (handling the state)
-services.js (making all API requests)
-component.vue (showing my component)
I access the state in the component like this:
computed: {
...mapState({
dashboard: state => state.dashboard
// this.dashboard returns an Observer Object
}),
getUser: function () {
return this.$store.state.user; //this yields undefined
}
}
and in my store.js, I have:
const state = {
status: {},
user: null //this gets assigned an object with user data
// this object I want to pass to my component
}
//I tried setting a getter but yields undefined
const getters = {
user(state) {
return state.user
}
}
When I console.log(this.dashboard) in my component, I can see the Observer component but I cannot access it.
GOAL: I want to grab the user object in the state and send it to my parent component via props.
TIA
Level 104
If you define getters in your Vuex store, then you can spread mapGetters into your components' computed properties:
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
...mapGetters([user]),
// your component's own computed properties
},
// ...
}
Level 2
@rin4ik @tykus this is what I currently have. My store is defined inside my vue instance like so:
import Vuex from 'vuex'
Vue.use(Vuex);
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
So I updated my getter to look like this:
const getters = {
user: state => state.user
};
and then in my component, I map through the getters like so:
computed: {
...mapGetters({
userDetails: 'dashboard/user',
}),
},
created () {
// I can see the $store that contains my getters and the user data but I can't access it.
// console.log('Getters:', Reflect.ownKeys(this.$store.getters))
}
This getter result renders in the component:
//this is undefined
<NavBar :user="userDetails"></NavBar>
//this renders the object on the screen
<div>{{ userDetails }}</div>
Level 2
Level 104
What's going on here?
computed: {
...mapGetters({
userDetails: 'dashboard/user',
}),
},
Your getter is called user:
computed: {
...mapGetters([
'user'
]),
},
Level 2
@tykus you can assign keys to getters when you map over them.
https://stackoverflow.com/questions/45131928/access-vue-vuex-namespaced-getter-from-template
computed: {
...mapGetters({
userDetails: 'dashboard/user', //this contains the namespace and the getter 'user'
}),
},
Level 104
I get that you can namespace your stores, but where does dashboard come from; it has not been mentioned previously?
Level 2
@tykus I just renamed my store.js to dashboard.js, I can take the namespace out, to have it look like this but I will still have the same result. I can see my data but I can't access it.
Please or to participate in this conversation.