I have this code:
computed: {
mapState(["appErrors", "user", "profilesFor"]),
compiledData () {
return {
template: `<p>${this.data}</p>`
}
}
}
Basically I am using Vuex and it has mapState but I also want to define my own computed functions so I changed
computed: mapState(["appErrors", "user", "profilesFor"]) --Works
to
computed: {
mapState(["appErrors", "user", "profilesFor"]),
compiledData () {
return {
template: `<p>${this.data}</p>`
}
}
}
But it doesn't work. How would I fix this issue?
The mapState helper provides an object containing computed getter functions.
Use the spread operator to include each of those functions in your computed object:
computed: {
...mapState(["appErrors", "user", "profilesFor"]),
compiledData () {
return {
template: `<p>${this.data}</p>`
}
}
}
Related
I have a simple store:
UsersStore.js
state() {
return {
users: {
name: '',
userHasPermissions: false,
}
}
}
I am trying to use mapState to have the state accessible in my component. When I import the entire User object of the store like below, it works:
App.vue
computed: {
...mapState('users', {
myUser: 'user'
}
but I just want to import the userHasPermissions state but when I do the following, it does not seem to work:
App.vue
computed: {
...mapState('users', {
hasPerms: 'user.hasPermissions'
}
You can use vuex getters to get a specific property from any store object
state() {
return {
users: {
name: '',
userHasPermissions: false,
}
}
},
getters: {
userHasPermission(state) {
return state.users.userHasPermission || false;
}
}
Now you can use mapGetters to map store getters to your vue component
computed: {
...mapGetters({
hasPerms: "userHasPermission"
})
}
If you want to avoid using mapGetters and getters and use mapState, then you need to define a computed function inside your mapState to fetch the desired property
computed: {
...mapState({
hasPerms: (state) => state.users.userHasPermission
})
}
This is my my code?
computed: {
posts() {
return this.$store.getters['posts/postsByUser']
},
loggedIn() {
return this.$store.getters['auth/check'];
},
user() {
return this.$store.getters['auth/user']
}
},
created() {
this.$store.dispatch('posts/fetchPostsByUser', this.user.id)
}
Please tell me if you need more clearance
Use this computed property (user) which is available on the Vue component instance
created() {
this.$store.dispatch('posts/fetchPostsByUser', this.user.id)
}
I'm trying to create a general filter component which get's it's data from the store
Right now, I'm using mapGetters like so
...mapGetters({
items: 'filters'
}),
But I would like to be able to generalize this to which getter I'm mapping
props: {
filterType: String
},
computed: {
...mapGetters({
items: this.filterType
}),
}
This gives me the following error
Cannot read property 'nombre' of undefined
I know that I can do:
computed: {
items: function () {
return this.$store.getters[this.filterType]
}
}
but I just wanted to check if there is a way to use the properties of the vue instance with the mapGetters, or if you need to strictly hardcode the getters names inside
Maybe that's what you are looking for (or at least closest to the use of mapGetters):
props: {
filterType: String
},
computed: {
...mapState({
items(state, getters) {
return getters[this.filterType];
}
})
}
I want to pass value from props and using it as the namespace in mapState, then it show error: 'Error while initializing app TypeError: Cannot read property 'store' of undefined'
Here my code:
ParentComponent: <Editor store="store-test" />
ChildComponent:
export default {
props: ['store'],
computed: {
mapState(`${this.store}`, ['data'])
}
}
But i replace this.store = store-test, i have receive data i want.
And i dont know how to using
...mapMutations({
function() {
}
})
is same
...mapState({
data(state) {
return state[this.store].data;
},
})
Because mapState returns its value for your computed definition at compile time, you cannot use props as they are only assigned at runtime.
You will have to use
computed: {
data () {
return this.$store.state[this.store].data
}
}
If you want, you can still use mapState however you cannot use the prop value as a namespace string
mapState({
data1 (state) { // 👈 note: cannot be an arrow function
return state[this.store].data1
},
data2 (state) {
return state[this.store].data2
}
})
I have difficulty to Write a Global Methods to check authentication in NuxtJS. The methods which I can write v-if in components to display if it return True.
I put this code in layout/default.vue but it doesn't works.
/layout/defaut.vue
<script>
import '~/assets/icons'
export default {
head () {
return !this.mobileLayout ? {} : {
bodyAttrs: {
class: 'mobile'
}
}
},
created () {
this.LoggedIn()
},
methods: {
LoggedIn: function () {
return this.$store.state.authUser
}
}
}
</script>
Components:
<template>
<div v-if="LoggedIn">Authenticated</div >
</template>
Error:
Property or method "LoggedIn" is not defined on the instance but referenced during render
Hope you guy help me!
Since authUser is a state property in vuex, not a method. LoggedIn in your component is simply returning a value from the state and does not need to be a method.
You should use a computed instead of a method. You also do not need to call LoggedIn from the created method, once it is a computed, it will be calculated automatically.
<script>
import '~/assets/icons'
export default {
head () {
return !this.mobileLayout ? {} : {
bodyAttrs: {
class: 'mobile'
}
}
},
computed: {
LoggedIn: function () {
return this.$store.state.authUser
}
}
}
</script>
Or even better, use mapState from vuex which is documented here https://vuex.vuejs.org/en/state.html
<script>
import Vuex from 'vuex'
import '~/assets/icons'
export default {
head () {
return !this.mobileLayout ? {} : {
bodyAttrs: {
class: 'mobile'
}
}
},
computed: {
...mapState({
LoggedIn: 'authUser'
})
}
}
</script>
Your template does not need to be changed.