VueJS - Best practises for performance : one individual modal or storing a modal in component?

Question

I'm making some updates to one of my VueJS apps, and there are a few different ways I could go about it. I wanted to know what the best practice was in terms of performance, or if there isn't much of a difference at all.

Essentially I have a couple of different pages, each of these pages present results in a table. I'm using Boostrap to manage the tables. What I want to do is have a button at the far end of the table that opens a modal where you can see detailed results for that specific line entry in the table.

Now because there are tables on different pages and I want the same behaviour, I want to have the modal / button in their own component, that way I can just copy-paste the component from one page to the next and have the exact same behaviour.

My question is this, is there a difference between:

• Having the modal on the page itself, and having all the logic in the page itself
• Having a component containing the modal and the logic, and repeating that component 1000s of times in the different tables

Is there any performance difference between having the modal repeated 1000 times in the table versus having only one modal in the page? My understanding is that the modal wouldn't be loaded until you click the button anyway, so would it have an impact on performance?

Answer 1

The way that I would approach this would be to use a Vuex store. When a user clicks the button just go set the data in the store, and then have your modal component import this same store and get the data it needs. That way whenever you want to use the modal anywhere in the application you can as long as the data it needs has been set in the store, and you'll (hopefully) have a nice design to just do something like this.$dialogs.popMyCoolModal(data)

Something like this:

...mapActions({
  setButtonData: actionTypes.SET_BUTTON_DATA
})

Then on click of the button just call this mutation, pass it the payload that it needs. I'm just calling it the horrible name of buttonData since I'm not sure what your data actually looks like.

In your store:

export const actionTypes= Object.freeze({
    SET_BUTTON_DATA: `setButtonData`
});

export const actions: ActionTree<State, State> = {
    async setButtonData({commit, state}, buttonData: ButtonData) {
        const data = await someApi.getData(buttonData);
        commit('setButtonDataState', data);
        // Pop your modal here... how you pop it entirely depends upon your modal implementation
    }
};

export const mutations: MutationTree<State> = {
    setButtonDataState(state: State, data: SomeData) {
        state.data = data;
    }
}

Then in your store after you set the data you can simply pop the modal component in the action, the modal component will take care of the rest.