nhayder
184
1
Vue

passing id to getter function

Posted 1 month ago by nhayder

hi, i'm using vuex with laravel as backend for my app, ..

in vuex i have pages array containing all the pages on the website

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex, axios);

export const store = new Vuex.Store({

    state:{
        pages   : [], // this is the array
    
    },

    getters: {
       
       // this is the function that will filter the page by id, so how to pass the id to this funciton
       getPageSettings: (state) => (id) => {
            
            return state.pages.find(pages => pages.id === id)
            
        }
        
    }

the part im struggling with is that i need to allow the user to change page settings by passing page id to getter function above, In this way i can filter requested page among other pages and display it on proper form for the user to update.

So i have gone ahead and mapped the getter function in my update page component like this

  computed:{

    ...mapGetters(['getPageSettings']),

    },

i can get the getPageSettings on vueDevTools if i fixed the getter function like this.

    getters: {

       getPageSettings: (state) => (id) => {
            
            return state.pages.find(pages => pages.id === 5)
            
        }
        
    }

so my question is how can i pass the ID form the component to store getter function.

Any ideas, ...

Please sign in or create an account to participate in this conversation.