CODEWITHSUNDEEP
node.jsmongodbvue.jsaxiosnuxt.js
Steven Yoo
Steven Yoo

Reputation: 117

Nuxt.js: What is the best or practical way to save the Query in Vuex even after refreshing the page?

I'm creating a Reddit-like web application using Nuxt Frontend along with Node-Mongo Backend.

But since I lack practical programming knowledge, I'm having a little trouble with handling Article (or post) list with queries.

Below is the description of how the app should work:

(1) Route: /page/index.vue Using asyncData({app, query}), I request data from the backend with axios. Article list can be sorted with genre, and sort=${sortQuery}. I have no problem retrieving the sorted article list from the backend using watchQuery: true provided by Nuxt.

(2) Route: /page/:id/index.vue This is where users can read the individual article. When the page is loaded, asyncData is executed to retrieve currentArticle data as well as ArticleList. When users organically move from /page to /page/:id, article list sorted by the query is preserved since Query has been stored in Vuex Store.

The Problem: However, when users refresh the page, it is not possible to retrieve the sorted article list, because the Vuex stored Query does not exist...

And I'd like to preserve the last query used to re-load the article list from the backend even after refreshing or odd way of routing.

To solve this issue, I was thinking of storing Vuex Query in LocalStorage of the web, but I feel like there must be an easier and much more practical way to achieve this...

Could someone please leave a comment on how to resolve this problem practically?

Let me know if more information is needed!

Thank you for your time in advance :)

Upvotes: 0

Views: 408

Answers (1)

Rikard Askelöf
Rikard Askelöf

Reputation: 2932

I would pass on the query parameters in nuxt link from the first page like:

<nuxt-link :to="{ path: 'page', query: { genre: 'x' }}">My Article</nuxt-link>

That way the sorting condition would be persisted in the url and you could link to or share it from anywhere/with anyone.

Upvotes: 1

Related Questions