VueX within Mixin

Viewed 241

Before writing too much code, I thought I'd conceptually understand whether what I am doing is correct.

I have some components, that import a mixin. The mixin has a web api call to retrieve the some links from the (HATEOAS) API, so the UI can use the links without forming its own links. These would look something like:

[
        {
            "Rel": "GetSupportingData",
            "Href": "https://api.com/SupportingData"
        },
        {
            "Rel": "Search",
            "Href": "https://api.com/Search"
        }
]

So the MIXIN has a method called GetLink("Search") that would retrieve the links from the API and return the link requested.

This is all ok, but as the mixin is imported to a lot of components, I don't want each time its used to make the WEB API call to get the links before filtering them. I was therefore wondering if I should use Vuex to manage the state of the links and retrieve them if the store count was zero?

The examples of Vuex I have seen instantiate it on the component, so what I'm doing feels like it may not be correct.

1 Answers

You can store the web api links to store that is one approach, but when you refresh the page again the store needs to be filled with the api links

So, the alternate approach is to use localStorage or indexedDB of browser

Everytime when you load the application first it goes to localstorage or indexedDB and checks for the api links. If its present, it restores to Vues store. Or calling mixin method to fetch api links and loads to browser storage and vuex store

Related