I stored my data in Vuex store. Here how it looks like:
And basically, I want to show first_name in the view. So I returned the data like this:
data () {
return {
first_name: this.$store.state.user.attributes.first_name,
}
},
Ans easily want to display it inside of the div:
<div>{{first_name}}</div>
But I am getting vue.esm.js:1906 TypeError: Cannot read properties of undefined (reading 'first_name')
You need a computed property for that.
So instead of having the variable first_name in your data, set it as a computed property as follows:
computed: { first_name() { return this.$store.state.user.attributes.first_name } }
Related
This is a screenshot from another question about mapGetters
Link to the question I took the screen from
In Vue.js I saw an answer to a post.
It said :
In your Component
computed: {
...mapGetters({
nameFromStore: 'name'
}),
name: {
get(){
return this.nameFromStore
},
set(newName){
return newName
}
}
}
And I wonder why newName is a "new" name ? And also what it looks like to call the getter in the template html section. Do we use the nameFromStore like a data in the template ?
I tried to see how getters are used but what I found didn't look like this structure. The things I found looked like someone using a value in data that returns this.$store.getters.nameFromStore but I don't want to use the data and do it all in the computed instead like the picture I attached if someone can please help me ?
If you simply want to use mapGetters to access data store in vuex state you can do it as you have it above, without the get/set computed. I'm not sure what the intention of that get/set computed property was but it doesn't look like it would work as expected.
Try this:
// vuex index.js
// ...
getters: {
getAnimals: state => {
return state.items.filter(i => i.type === 'animal');
}
}
// your component.vue
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
...mapGetters(['getAnimals']) // access using this.getAnimals
// or
...mapGetters({ animals: 'getAnimals' }) // access using this.animals
}
}
The bennefit to using it this way is being a computed property, when the items change in vuex state, they will be recomputed, and your component will react to this change. Hopefully this is a clear explanation.
The vue docs:
https://vuex.vuejs.org/guide/getters.html#method-style-access
I have a list of shipments correctly being rendered into the DOM. Such an array of shipments is defined like this inside the component:
computed: mapState([
'shipments'
])
Now I want to filter the array based on certain criteria. I had this perfectly implemented before inserting Vuex into the app. The computed property that used to do this before, looks like this:
filteredShipments() {
// Some processing
let filtered = arr.filter(shipment => shipment.criteria);
return filtered;
}
What's the correct syntax to filter shipmentsbased on filteredShipments()?
I got it. This is solved with the spread operator:
computed: {
...mapState([
'shipments'
]),
filteredShipments() {
// logic
}
}
I'm trying to get the length of state object from a computed property but it seems to be not reactive.
the state structure:
state: {
user: {
cards: {},
}
}
the getter in my store:
cardCount(state) {
return Object.keys(state.user.cards).length
}
and a computed prop:
calcLeft() {
return this.$store.getters.cardsLeft - this.$store.getters.cardCount
}
on state.user.cards change, i expect from cardCount to return a different value to the computed prop, but that's not happening, it's just stay the same.
Thanks to skirtle, iv'e followed the the usual caveats (vuex),
to change a state prop can be done by the following syntax but it won't be reactive:
state.obj[key] = somevalue
to do that we can use both Vue way or spread syntax to achieve reactivity:
the Vue way:
Vue.set(state.obj, key, value)
or the spread syntax like that:
state.obj = {...state.obj, key: value}
I'm setting an array in my data property through a computed function and it's working. But I wonder how is possible if I don't call it anywhere?
If I try to add a console.log in my function it doesn't print anything, but it's still setting my data, how is that possible?
My data:
data() {
return {
projects: []
};
},
My computed:
computed: {
loadedProjects() {
console.log("Hello there")
this.projects = this.$store.getters.loadedProjects
}
},
I expect that it doesn't run because I'm not calling, and if it is running(I don't know why) to print the console.log before to set my data. Any clarification?
Thanks:)
You're confusing computed props with methods. If you want to have a method like above that sets a data value of your vue instace, you should use a method, not a computed prop:
data() {
return {
projects: []
};
},
methods: {
loadProjects() {
console.log("Hello there")
this.projects = this.$store.getters.loadedProjects
}
}
This would get the value of this.$store.getters.loadedProjects once and assign it to your local projects value. Now since you're using Vuex, you probably want your local reference to stay in sync with updates you do to the store value. This is where computed props come in handy. You actually won't need the projects in data at all. All you need is the computed prop:
computed: {
projects() {
return this.$store.getters.loadedProjects
}
},
Now vue will update your local reference to projects whenever the store updates. Then you can use it just like a normal value in your template. For example
<template>
<div v-for='item in projects' :key='item.uuid'>
{{item.name}}
</div>
</template>
Avoid side effects in your computed properties, e.g. assigning values directly, computed values should always return a value themselves. This could be applying a filter to your existing data e.g.
computed: {
completedProjects() {
return this.$store.getters.loadedProjects.filter(x => x.projectCompleted)
},
projectIds() {
return this.$store.getters.loadedProjects.map(x => x.uuid)
}
}
You get the idea..
More about best practices to bring vuex state to your components here: https://vuex.vuejs.org/guide/state.html
Computed props docs:
https://v2.vuejs.org/v2/guide/computed.html
You should check Vue docs about computed properties and methods
and shouldn't run methods inside computed property getter
https://v2.vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods
Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed.
In my project , i have a shoppinglists Array to get displayed. When the component is mounted, the store is populated ( it' conatins only one array for the logged customer, fetched from the API db server... wo any problem)
On dissplay, I get the following message :
vue.esm.js?efeb:571 [Vue warn]: Property or method "shoppinglists" is not defined on
the instance but referenced during render. Make sure that this property is reactive,
either in the data option, or for class-based components, by initializing the
property.
See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
The shoppinglists property is defined as computed ...
computed: {
...mapGetters([ { shoppinglists: 'getShoppingLists' } ])
},
And the store contains the shoppinglists array
STATE
{
"shoppinglists":
[{"title":"Groceries","items":[{"text":"Bananas","checked":true},
{"text":"Apples","checked":false}],"id":1,"userId":1}],
"isAuthenticated":true,
"currentUserId":1
}
If I insert a prop declaration in data :
data: function () {
return {
shoppinglists: []
}
},
the warning disappear, but still theres is no list displayed..
what could be wrong ?
thanks for feedback
not exactly duplicated question, but not far from this one
It looks like you have mixed the two different options for mapGetters().
You can either write it like this:
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// mix the getters into computed with object spread operator
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
Which maps this.doneTodosCount to this.$store.doneTodosCount and so on.
Or you could do it this way, which is probably what you want:
...mapGetters({
// map `this.doneCount` to `store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
And for your example this becomes:
computed: {
...mapGetters({ shoppinglists: 'getShoppingLists' })
},
More documentation and source of the examples are at the bottom of this article.