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

in a computed: const variable = get("propertyName") returns a function instead of the object or the value. #113

Closed Derasm closed 4 years ago

Derasm commented 4 years ago

In computed i have a function Tasks which return an array. using VueX:

Tasks() {
  const tasks = this.$store.getters.GetTasks;
  return tasks //this returns the array of Tasks as you would expect.
}

when i try to do the same using pathify:

const tasks = get("tasks") 
return tasks // this returns 'function getOne()' and nothing else. 

However, if i do this:

Tasks: get("tasks") // this works as expected. 

is there something i am missing here, or is it not supposed to be possible to use Get method within a function?

Updated! Apparently i needed to do this.$store.get instead. So i am guessing in Computed Properties the

get("something") 

becomes shorthand for

this.$store.get("something")
davestewart commented 4 years ago

Hey,

(I updated your formatting - you might want to follow that format in the future!)

Sorry it's a bit confusing first time, but:

If you want to get a value from the store for use in a calculation, use the method on the store.

If you want to wire a value from the store as a computed property, use the helper.

Is that clear?

Derasm commented 4 years ago

Hey Dave, and here i thought Github was super smart with their formatting :D I'll follow it in the future. 3 things then:

  1. It would be nice if the docs had a "this is what call corresponds to, this is what sync corresponds to, this is set, this is get" part. I know the get/set part is there, but i could see nothing about the Sync and the Call part.

  2. It would probably alleviate a bunch of confusion if the docs had an example of how to use it in a computed property ( as is done in the demos), and how to use it in a method, 'cause i could find literally nothing on this situation and it has taken me 2 days and 2 asked vuex vets to figure this out (embarrassingly enough).

  3. Thanks for the insanely fast response !

davestewart commented 4 years ago

FWIW, I find that in code you can treat getters as if they were state, so not much value in naming like methods:

// could do this...
const tasks = this.$store.getters.GetTasks;
// I think this is clearer
const tasks = this.$store.getters.tasks;

Pathify actually has something called "accessor priority" for this situation; if you name the state and the getter the same, it will choose the getter over the state:

const tasks = store.get('tasks') // automatically gets the getters

https://davestewart.github.io/vuex-pathify/#/api/properties?id=accessor-priority

davestewart commented 4 years ago

Yeah, the docs... they give too much info in parts, and perhaps don't get to the point quick enough in others.

I should have gone the API + Guide approach, but ended up doing a kind of "combined" approach which isn't great when you just want to see what the API is!

Unfortunately, I have never had the time to go back and redo them. Was thinking about doing them in VuePress... but you know... life!

You are welcome to always ask questions here, and I will do my best to answer them 😃