In first component I have a function that changes the array using the value that is stored in VueX
methods: {
//get a function that changes the pickedlist array that is stored in vuex store
...mapActions([
'updatePickedDates'
]),
...mapGetters([
'dates'
]),
resetArray() {
this.updatePickedDates(this.dates}
}
In another component
I use getter from VueX that is passed on this array:
computed: {
...mapGetters(["managementNews"])
}
However when resetArray() function runs I get error that
state.pickedDates.includes is not a function
Here are the getters and mutations in my VueX store:
mutations: {
mutatePickedDates: (state, payload) => {
state.pickedDates=payload
}
},
actions: {
updatePickedDates({commit}, payload) {
commit('mutatePickedDates', payload)
}
},
modules: {
},
getters : {
//get news that are of type management
managementNews: function(state) {
return state.news.filter(i => i.type === "management" && state.pickedDates.includes(i.date));
},
dates: state => {
return state.dates
},
pickedDates: state => {
return state.pickedDates
}
},
In this case this.dates is a function and not an array. The error indicates that it's not undefined, yet it doesn't have includes method.
mapGetters should provide getters for computed properties. There's no way how mapGetters could be applied to methods and make this.dates to be an array.
It should be:
methods: {
...mapActions([
'updatePickedDates'
])
},
computed: {
...mapGetters([
'dates'
]),
}
Related
I'm trying to use an action to call method with boolean value using the store
In the store app.js, i've defined :
export default {
namespaced: true,
state: () => {
return {
isScrollDisabled: true,
}
},
mutations: {
setScrollDisabled(state, value) {
state.isScrollDisabled = value
},
actions: {
setScrollDisabled(context, value) {
console.log('Action called in store')
context.commit('setScrollDisabled', value)
},
getters: {
getScrollDisabled: state => state.isScrollDisabled,
}
,
In the component, i dispatch the action like this :
this.$store.dispatch('app/setScrollDisabled', false) // with true or false
And in other component, i use the store getter to retrieve the value :
computed: {
isDisabled() {
return this.$store.getters.getScrollDisabled
},
I see nothing in the console and also in the VueJs Chrome extension, there are no event displayed
What i forgot here ?
More friendly and easy
computed: {
...mapGetters('app', [
'getScrollDisabled'
])
},
methods: {
...mapActions('app', [
'setScrollDisabled'
])
}
I have a Vuex getters that return the state of courseData but for some reason, I couldn't access it. I tried to do console.log(this.$store.getters) and the getter that I am trying to access is present and has values. But when I try to do console.log(this.$store.getters.getCourseData) or console.log(this.$store.getters['courses/getCourseData']) it returns an empty array instead of an object.
Component:
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
data() {
return {
data: null,
}
},
methods: {
...mapActions('courses', ['fetchCourseData']),
},
computed: {
...mapGetters('courses', ['getCourseData'])
},
created() {
this.fetchCourseData(this.$route.params.code) // <-- This line sets the state
console.log(this.$store.getters) // <-- List of store getters
console.log(this.$store.getters['courses/getCourseData']) // <-- Returns empty array
console.log(this.$store.getters.getCourseData) // <-- Returns undefined
}
}
</script>
Store:
import axios from 'axios'
export default {
namespaced: true,
state: {
courseData: [],
},
getters: {
getCourseData(state) {
return state.courseData
}
},
actions: {
async fetchCourseData({ commit }, code) {
await axios
.get('teacher/course-management/course/code/' + code)
.then(response => {
commit('SET_COURSE_DATA', response.data.data)
})
}
},
mutations: {
SET_COURSE_DATA(state, courseData) {
state.courseData = courseData
}
},
}
Since you already use async/await in your action, also use it on your created method.
async created() {
await this.fetchCourseData(this.$route.params.code) // <-- This line sets the state
console.log(this.$store.getters) // <-- List of store getters
console.log(this.$store.getters['courses/getCourseData']) // <-- Returns empty array
console.log(this.$store.getters.getCourseData) // <-- Returns undefined
}
I have these actions and getters defined on my Vuex store. I now want to use them in my local computed properties. How can I? Using this with the action name returns this error:
"TypeError: this.updatePlan is not a function"
This is what I would LIKE to do.
computed: {
...mapGetters([
'returnShop',
'returnPlan',
'returnFulfillmentEnabled'
]),
...mapActions([
'getShop',
'updatePlan'
]),
selectPlan: {
get() {
this.returnPlan;
},
set(value) {
this.updatePlan(value);
}
}
},
None of my actions are async
For completeness here are my actions
actions: {
getShop: ({ commit }, payload) => {
axios.get("/admin/wine_app/shops").then(response => {
commit('changeShop', response.data);
});
},
updatePlan: ({ commit }, payload) => {
commit('changePlan', payload);
}
}
And the store IS injected into all components. See here:
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
router,
store,
render: h => h(App)
}).$mount()
document.body.appendChild(app.$el)
})
state & getters can be merged as computed properties
actions & mutations can be merged as methods
then u should use his maps as below:
computed: {
...mapGetters([
'returnShop',
'returnPlan',
'returnFulfillmentEnabled'
]),
selectPlan: {
get() {
this.returnPlan;
},
set(value) {
this.updatePlan(value);
}
}
},
methods: {
...mapActions([
'getShop',
'updatePlan'
])
}
I defined a getter in my store, and i try to access it within my child components, but i only can access it as a method...
I read in the doc we could access it as a property, but when im doing so, it returns me the signature of the getter function, here is my code :
const store = {
state: {
storage
},
getters: {
username: (state, getters) => {
return 'tmp';
}
}
}
My child component :
export default {
data() {
return {
username: this.initialUsername
}
},
methods: {
...mapMutations([
'login'
]),
onLogin(e) {
this.login(this.username);
}
},
computed: {
...mapGetters({
initialUsername: 'username'
})
},
created() {
console.log(this.username)
}
}
What i get in the console :
ƒ username(state, getters) {
return 'tmp';
}
Any idea why ?
Thanks ;)
Alright, i figured out why it didn't work lol, i just didn't instantiate a vuex store, but just a normal object containing my state and getters... :
export default {
state: {
storage
},
getters: {
username: (state, getters) => {
return state.storage.username;
}
},
mutations: {
[LOGIN]: (state, username) => {
state.storage.username = username;
},
[LOGOUT]: state => {
state.storage.logout();
}
}
}
Sorry buddies, that was the first time I used vuex '-'
My module has:
export default {
namespaced: true,
state: {
conversations: false
},
getters: {
getConversation(state, ConversationId) {
console.log('here i am!')
let conversation = _.find(state.conversations, { id: ConversationId })
console.log('conversation', conversation)
return conversation
},
In my component, I'm trying:
export default {
name: "ConversationDetail",
components: { HeaderSection },
computed: {
...mapGetters("conversation", ["getConversation"]),
ConversationId() {
return this.$route.params.ConversationId;
},
conversation() {
return this.getConversation(this.ConversationId);
}
},
methods: {
...mapActions("conversation", ["loadConversation"])
},
mounted() {
this.loadConversation(this.ConversationId);
But am getting an error:
Error in render: "TypeError: this.getConversation is not a function"
What am I doing wrong?
You are referencing the getter correctly, however, if you wish to pass parameters to your getter it needs to return a function that takes your parameter, for example with a curried lambda:
getter: (state) => (ConversationId) => {...}