I'm upgrading an existing project from Vue 2 to Vue 3, using the composition API.
In Vue Use, there is a composable to use the Vuex Store to make the code cleaner (https://vueblocks.github.io/vue-use-utilities/guide/vuex/namespacing.html#binding-helpers-with-namespace)
with a following example :
import { useVuex, useStore } from '@vueblocks/vue-use-vuex'
export default {
setup () {
const store = useStore()
console.log(store)
const { useState, useGetters, useActions } = useVuex()
return {
...mapState('some/nested/module', {
a: state => state.a,
b: state => state.b
}),
...mapGetters('some/nested/module', [
'someGetter', // -> this.someGetter
'someOtherGetter', // -> this.someOtherGetter
]),
...mapActions('some/nested/module', [
'foo', // -> this.foo()
'bar' // -> this.bar()
])
}
}
My question is: how do I reference, say a, in a function I define in the composition api, or even print this to the console log?
import { useVuex, useStore } from '@vueblocks/vue-use-vuex'
export default {
setup () {
const store = useStore()
console.log(a.value) // <------- How do I reference a here?
const { useState, useGetters, useActions } = useVuex()
return {
...mapState('some/nested/module', {
a: state => state.a,
b: state => state.b
}),
...mapGetters('some/nested/module', [
'someGetter', // -> this.someGetter
'someOtherGetter', // -> this.someOtherGetter
]),
...mapActions('some/nested/module', [
'foo', // -> this.foo()
'bar' // -> this.bar()
])
}
}