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) => {...}
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'
])
}
Uncaught TypeError: Cannot use 'in' operator to search for 'USERS' in undefined I can't understand this line : use 'in' operator to search for 'USERS'
and also why undefined ?
I do not understand these errors please explain to me.
My Vuex :
export default new Vuex.Store({
state: {
users: []
},
actions: {
GET_USERS_FROM_API({commit}) {
return axios('http://localhost:3000/users', {
method: GET
})
.then((response) => {
commit('SET_USERS_TO_VUEX', response.data)
})
}
},
mutations: {
SET_USERS_TO_VUEX: (state, users) => {
state.users = users
}
},
getters: {
USERS(state) {
return state.users
}
},
modules: {
}
Here is my script:
import {mapActions, mapGetters} from 'vuex'
export default {
name: 'Home',
components: {
},
data() {
},
computed: {
...mapGetters([
'USERS'
])
},
methods: {
...mapActions([
'GET_USERS_FROM_API'
])
},
mounted() {
this.GET_USERS_FROM_API()
}
}
</script>
Maybe I misstaked in axios response in my vuex ? I defined users in state. I think i get error in my axios response, but I do not know how to fix it.
syntax error, forgot to put quotation marks to the GET method and also forgot to import axios
Seems like you forgot ro return object in your data statement and vue crashes.
The valid data property is :
data() {
return{};
},
What is the best way to use this data from the Vuex store's Action in the needed component?
import axios from 'axios'
export default {
namespaced: true,
state: {
items: []
},
actions: {
fetchCategories ({state, commit}) {
return axios.get('/api/v1/categories')
.then(res => {
const categories = res.data
commit('setItems', {resource: 'categories', items: categories}, {root: true})
return state.items
})
}
}
}
Component
export default {
components: {
ThreadCreateModal,
ThreadList
},
data () {
return {
...
}
},
computed: {
...
},
created () {
...
},
methods: {
...
}
</script>
Where and how should I use that action for binding the data in this component?
Use mapState by import it from vuex and call it in computed:
computed: {
...mapState(['items']), // if you dont use namespace
...mapState("your_module_name", ['items'] ) // if you use namespace
},
then you can access it by this.items.
However, you can access it directly this.$store.state.items
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 '-'