Wildcard + custom getters.

[mikemassari]

Hello, I have the following (demo) state:

const state = {
  name: 'John Doe',
  count: 0,
  loading: false,
  redditPosts: [],
  getRedditPostsError: [],
  locale: 'en'
}

and the following getters:

import { make } from 'vuex-pathify' // https://davestewart.github.io/vuex-pathify/#/api/store?id=make-getters

const getters = {

  fibonacciNumber (state) {
    const fibonacci = (number) => {
      if (number < 1) return 0
      if (number <= 2) return 1
      return fibonacci(number - 1) + fibonacci(number - 2)
    }

    return fibonacci(state.count)
  },
  redditTopPostTitle (state) {
    return state.redditPosts.length ? state.redditPosts[0].data.title : 'Loading...'
  },
  redditTopPostUrl (state) {
    return state.redditPosts.length ? `https://www.reddit.com${state.redditPosts[0].data.permalink}` : '#'
  },
  ...make.getters(state)
}

In my component, when I call the function to map all getters with a wildcard

computed: {
    ...get('demo@*')
  }

I only receive the standard getters (the ones generated with make) and not my custom ones.

Is there something I'm missing?

[davestewart]

Hmmm...

Is demo a module? If so, and you want to access it via demo the store should be namespaced.

Either way, the @ syntax is used to access store sub-properties which can't be easily accessed via Vuex alone:

// store
const state = {
  value: 1,
  options: {      // <-- property (object)
    value: 1,     // <-- sub-property (value)
  }
}

// component
computed: {
    value: get('value'),
    optionValue: get('options@value') // <-- uses sub-property access
}

This being the case, for your problem you just don't need @.

If you just use the following, you should be good:

// not namespaced
...get('*')

// namespaced
...get('demo/*')

Let me know if that helps.

I only receive the standard getters (the ones generated with make) and not my custom ones.

That's a bit weird though - I'll investigate!

[mikemassari]

In this particular case it is. I am creating a project-starter for my agency and the demo module is supposed to help/guide in the creation of the application 😄

I managed to get the generated properties by using ...get('demo/*') but I'm still missing the Custom ones like fibonacciNumber, redditTopPostTitle, etc.

Thanks for investigating and for this awesome tool! Please let me know if I can help.

[davestewart]

I'm still missing the Custom ones like fibonacciNumber, redditTopPostTitle, etc.

OK. let me investigate.

By the way, you don't need to create "redundant" getters!

Pathify automatically pulls from state if it doesn't find a getter. This is called Accessor Priority and is designed to keep your stores lean.

The only reason make.getters() is included is for folks who really REALLY want to make getters for everything.

They don't need to though - Pathify's paths provides the consistency, rather than making redundant getters and actions :)

[davestewart]

OK, this is a bug. I'll get a fix out tonight!

[davestewart]

OK @Michelemassari, this should be fixed now:

• https://codesandbox.io/s/github/davestewart/vuex-pathify/tree/master/demo?initialpath=api%2Fpaths&module=%2Fsrc%2Fexamples%2Fapi%2FPaths.vue

In the absence of automated tests, let me know how you go.

I had an issue on CodeSandbox where it didn't work the first time, not sure if this was a caching issue on their end, so keep your eye out and screenshot any error messages if you get them.

Cheers :)