davestewart / vuex-pathify

Vue / Vuex plugin providing a unified path syntax to Vuex stores
https://davestewart.github.io/vuex-pathify
MIT License
1.37k stars 57 forks source link

"helpers/vuex.js" can not replaced at runtime #42

Closed yiliang114 closed 5 years ago

yiliang114 commented 5 years ago

And i still can not understand why this vuex object can be REPLACED AT RUNTIME WITH THE ACTUAL VUEX STORE

davestewart commented 5 years ago

Will need a bit better explanation than that if this is a problem you want help with

yiliang114 commented 5 years ago
// helpers/component.js

export function get(path, props) {
  return make(path, props, getOne, function (path) {
   return expandGet(path, vuex.store.state, vuex.store.getters)
  })
}

the second and the third param of the function named expandGet, you use vuex.store.xxx, and the vuex obj here is comed from helpers/vuex.js which is created by youself.

i saw the annotation " this object is replaced at runtime with the actual vuex store. ", but in fact, i always get vuex is undefined when i used. so i just can not understand why this vuex object can be replaced.

sorry my poor english.

yiliang114 commented 5 years ago

maybe i should pay more attention to the files "helpers/accessers.js" and "plugin/pathify.js"

davestewart commented 5 years ago

Ah, now I understand why you were typing in capitals!

From here:

Explanation

So the plugin needs to do some acrobatics to get a reference to Vuex, so it can work directly on it.

This is accomplished in the install function:

It first imports an Object called vuex, and on this object is a property store.

In the install function, the Vuex instance is passed in (this is just how Vue does it) and that is added to the vuex helper object – which is part of Pathify:

  // cache store instance
  vuex.store = store

The reason for this that then other parts of pathify can also import this vuex helper and access the store property on it, which will be the same global Vuex which is passed in during install, and the same one you access via import store from 'store' ... or in components this.$store.... All three references point to the same store – the one you as a developer declare in your project.

The reason for this, is that certain functions won't have access to the component this so won't be able to reference this.$store so they grab the helper reference to it.

The reason for the "dummy" code is with the capital letters is for code intelligence when I am authoring the plugin.

And the reason for the capitals is so that anyone who goes poking around will hopefully understand what is going on. And probably to remind future me what the hell I was thinking!

Your issue

So - still not totally sure if you have a problem, or you are just curious how it works?

Are you having a problem that is preventing you from using Pathify?

Is this a question or a bug ?

😃

yiliang114 commented 5 years ago

I got it. I have learned a lot from your code ,Thank you very much ~