How to use Vuex’s state/getters with composition-api in Vue component

#vue #typescript #compositionapi #vuex

The composition-api is the next generation paradigm of Vue.js. I would say that it’ll be a standard way in Vue.js v3.
But now, you can use it in a v2 project by using https://github.com/vuejs/composition-api package.
We can easily find the way how to replace existing components with composition-api, but how can we use it with Vuex’s state/getters?

Firstly, I tried to use like below:

export default defineComponent({
  setup() {
    const state = reactive({
      count: store.state.count,
    })
    return {
      state,
      increment() {
        store.dispatch('increment')
      }
    }
  }
})

But it doesn’t work reactively. If the component doesn’t change the count variable directly, it won’t be incremented. Because the count variable is just a number but not connected between Vuex’s state and component lifecycle.

So, I changed the code

import { reactive, Ref, ref, onUnmounted } from '@vue/composition-api'
import { store } from './store' // your vuex store

function useVuex<T> (getState: () => T): Ref<T> {
  const data = ref<T>(getState()) as Ref<T>
  const unwatch = store.watch<T>(
    getState,
    (newVal: T) => {
      data.value = newVal
    }
  )
  onUnmounted(() => {
    unwatch()
  })
  return data
}

export default defineComponent({
  setup() {
    const state = reactive({
      count: useVuex<number>(() => store.state.count),
      doubleCount: useVuex<number>(() => store.getters['doubleCount'])
    })
    return {
      state,
      increment() {
        store.dispatch('increment')
      }
    }
  }
})