Open lexdubyna opened 4 years ago
Hello!
Sorry for missing this, I'm not spending any time on open source at the moment.
Did you get it working?
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:
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.
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.
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')
...
@fontzter nice!
Keep an eye on #130 as migrating to Vue 3 is now underway and partially complete.
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 thenget()
returns this in template:Is there a way to make it work? Thanks.