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)