Use VueX Pathify and Vuex Cache

[alexis-regnaud]

Hi everybody,

For a new project I try to accociate two amazing plugin : VueX Pathify & Vuex Cache. But if I respect the VueX Pathify setter syntax , my action's name is'nt recognized...

this.$store.cache.set('segments/loadAll!', {limit: 3})

With the classic dispatch syntax, it works but it is'nt the wanted way ..

this.$store.cache.dispatch('segments/loadAll', {limit: 3})

Thanks by advance !

[davestewart]

Hi Alex,

I don't know the cache plugin but I can look it up.

This means I'm not really familiar with the problem and mechanisms, or how to solve / workaround it.

Can you describe some of the mechanisms, and what you think might be a proposed solution?

[alexis-regnaud]

Hey,

VueX cache is a plugin to keep in cache the VueX data request if her is already call.

By exemple you call a dispatch action on the created of the Home component, if it's the first time that the API request is send, the data is load. But if you change of component and that you return again of the first component, the data is return but the request API will not execute.

However I don't see how associate the call of VueX plugin : this.$store.cache.dispatch('segments/loadAll', {limit: 3}) And the call of the VueX pathify : this.$store.set('segments/loadAll!', {limit: 3})

[davestewart]

Thanks for the explanation, it was really helpful.

Well, two ideas:

1. All Pathify helpers are function generators. The returned functions simply contain a reference to this.$store. We could make that configurable, then the returned reference would be to this.$store.cache

2. Pathify stores a reference to the store on install, and this is used to reference the store. We could maybe swap this reference for the store.cache ?

I will try to have a look at that this week.

I can do the work in a branch, perhaps you will be so good as to install it in your project from the branch (it's a simple npm install <path to github>

Let me know!

[davestewart]

By the way, you can still use dispatch with Vuex Pathify, as the syntax is identical.

Have you tried that?

[alexis-regnaud]

Thansks for your response !

Yes actualy I use the classic syntax : this.$store.cache.dispatch('segments/loadAll', {limit: 11})

After in classical uses case of Vuex Cache, you are some dispatch which are cached but other no... Everything depends of API call that you need to keep in cache. So I think that have a generic getter is'nt a correct solution.

Another idea could be to pass a param, in case by case, to use the cache or not. But I don't know if it's a correct way to you, because your plugin will be dependent of VueX Cache plugin

[davestewart]

So is this only in components?

Check this file:

• https://github.com/davestewart/vuex-pathify/blob/develop/src/helpers/component.js

I will need to check, but this is where the functions helpers are generated.

You're saying that you would want this.$store.cache to be used instead?

I could possibly add a getStore() utility that could decide where to get the store from, but I would need to know more about the workings of the lib to know when to use it and when not to.

I may ask questions about your English, as I didn't quite understand what you said here:

After in classical uses case of Vuex Cache, you are some dispatch which are cached but other no... Everything depends of API call that you need to keep in cache. So I think that have a generic getter is'nt a correct solution.

[alexis-regnaud]

Sorry for my approximate English..

Just I wanted to say :
The call method to use depends on your needs, sometimes you would use the classical call : this.$store.dispatch('segments/load') and another time you would use the catch call : this.$store.cache.dispatch('products/loadAll') I think, is not a good idea to define the call at used (this.$store or this.$store.cache) in a global level and then just call this.$store.set('...') in a local component.

I hope I was clearer this time ^^

So, the best way would be to use : this.$store.set('segments/load') or this.$store.cache.set('segments/load') But I don't know if this depends of you, or of VuexCache ?

[davestewart]

OK, thanks!

I think the best thing would be for you to create a dummy project with the various use cases, upload to git, and I can play with it.

What do you think?

[dewdad]

I'm wondering if anyone has a tried and tested method to use these two together? I'm very interested.

[davestewart]

@dewdad still waiting for a demo project so I can check this out.

Would you be interested in creating that?