what is the ideal way to cache or save the api response data in laravel + Vuejs?

user_8516745 0
Viewed 341

I am using laravel and vuejs for a project.when a page is rendered, api requests are sent to laravel and I get back as a response some data, how can I save these response data inorder to avoid sending requests every time I refresh the page? I want to avoid sending requests everytime I refresh the page so I only send the request one time and then save the response somehow somewhere and by refreshing no more api requests are sent. local storage is not very safe, and vuex store gets empty by refreshing the page is there some other way?

laravel vue.js
3 Answers

You can install a vuex plugin called 'vuex-persistedstate' which can be install via npm then in your vuex index.js file you need to import createPersistedState from 'vuex-persistedstate'; and below 'export default' add plugins: [createPersistedState()],

user_150604960

Though your answer might be duplicate you can use the vuex-persitedstate plugin. This plugin offers the options property which provides a white list of variable paths which you wanted to be persistent. See the example below, you could try adding ‘setCounts’ to the paths option, which will be persistent.

Example:

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
     paths: ['setCount']
  })

option paths is an array of any paths to partially persist the state. If no paths are given, the complete state is persisted. If an empty array is given, no state is persisted. Paths must be specified using dot notation. there are other options, you can check vuex-persistedstate

user_42356360

You can also try Service Workers. For that, you may need to check progressive web application implementation. But if your application has a lot of APIs which needs to be cached, with timely update, you can go with service workers.

user_51375350
Related