Vue 3, Vue Use, Vuex - How to reference variables defined in setup return statement in the composition api

Viewed 27

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()
        ])
      }
    }
0 Answers
Related