Using with Composition API

[lexdubyna]

Hello!
Currently trying to make it work with the new composition API.
I found a codesandbox where it does work and forked it to try make it work with component helpers (without writing const store = context.root.$store on every component), but then get() returns this in template:

function () { var args = [], len = arguments.length; while ( len-- ) args[ len ] = arguments[ len ]; if (!this.$store) { throw new Error('[Vuex Pathify] Unexpected condition: this.$store is undefined.\n\nThis is a known edge case with some setups and will cause future lookups to fail') } if (!getter || store !== this.$store) { store = this.$store; getter = makeGetter(store, path, stateOnly); } return getter.call.apply(getter, [ this ].concat( args )) }

Is there a way to make it work?
Thanks.

[davestewart]

Hello!

Sorry for missing this, I'm not spending any time on open source at the moment.

Did you get it working?

[davestewart]

Just checking that composition API example:

import { computed } from "@vue/composition-api";
import { get } from 'vuex-pathify';
 
export default {
  setup(props,context ) { 
  const store = context.root.$store
  const kasa = computed(() => store.get('test.kasa') )
  const obj = computed(() => store.get('test/obj.content') )
    return {
      kasa,
      obj
    };
  }
};

It would probably be better for Pathify to import the computed() helper internally (or in setup) and just have the Pathify API work the same:

import { get } from 'vuex-pathify';
 
export default {
  setup(props, context ) { 
  const kasa = get('test.kasa')
  const obj = get('test/obj.content')
    return {
      kasa,
      obj
    };
  }
};

This is why you are getting the result you are, because the get() helper returns a function.

What the guy who created the sandbox is doing is using the store-level accessors that Pathify attaches during installation.

To do what you want and avoid the verbose references, you could just make a helper:

import { computed } from "@vue/composition-api";

export function get(context, path) {
  return computed(() => context.root.$store.get(path));
}

Here is a working sandbox example:

• https://codesandbox.io/s/vuex-pathify-composition-api-jqmfn?file=/src/components/HelloWorld.vue

No idea when I will get the time to build this into the library properly, as I'm off open source for the time being, but thanks for the heads up.

[mrGrochowski]

Hi @lexdubyna . I'm author of sandbox.
Can You let me know when You think of something ?

In my opinion idea with proxying helepr what propose @davestewart is enough at this moment.

[fontzter]

In keeping with the composition function model, I created a useVuexPathify.js file:

import { computed } from '@vue/composition-api'
export default context => {
  const { $store } = context.root
  const get = path => computed(() => $store.get(path))
  const set = (path, data) => $store.set(path, data)
  const sync = path => {
    return computed({
      get() {
        return $store.get(path)
      },
      set(val) {
        return $store.set(path, val)
      },
    })
  }
  const dispatch = (action, data) => $store.dispatch(action, data)
  const commit = (mutation, data) => $store.dispatch(mutation, data)

  return { get, set, sync, dispatch, commit }
}

then use it in the components like this:

import useVuexPathify from '@/compFunctions/useVuexPathify'

export default {
  setup(props, context) {
    const { get, sync } = useVuexPathify(context)
    const profile = get('auth/user')
    const whatever = sync('module/whatever')
    ...

[davestewart]

@fontzter nice!

[davestewart]

Keep an eye on #130 as migrating to Vue 3 is now underway and partially complete.