How to architecturally determine whether a request is needed or not and after the request to update different data depending on the place of the call?

Question

Vue.js

I have a form inside a modal filled with data that comes from the server. You can open this modal from 2 places. In one place, the data for displaying the modal is always there, as it is requested for other purposes initially when the page is opened. In the second place, the data may or may not be.
Now in vuex I made a check through if there is data, the necessary data in the state or not. If not, then I request them, something like this:

actions: {
openModalwithForm({commit, state, dispatch}) {
            commit('modalFormVisible', true);
            if (state.formData) dispatch('getFormData);
        },
}

But I don't like that I use ifs at all. How can it be done better/cleaner?
And the second question. Depending on the place where this modal is called with the form, I need to update different data on the page, and making extra requests every time I get all the data seems not the best idea. How can it be destroyed here too?

Answer 1

It's ok with if in action. That's what all this fun was made for.
The store is responsible for the data and manipulations with them, and the component is just for input / output.