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') } } } }) This code would work perfectly!
I used the watching system of Vuex to connect composition-api’s lifecycle.
Give it try out with your project!
Top comments (0)