Hi,
I try to build a view in vue.js 2 where I use the new composition api and vuex. However I have problems with the quasar component expecting a boolean value instead of the object returned by the composition api. But if I return the .value the property itsef isn’t reactive anymore.
My template:
<q-drawer v-model="leftDrawerOpen"></q-drawer>
The store looks like this:
state: {
settings: {
leftDrawerOpen: false
}
},
mutations: {
setLeftDrawer(state, val) {
state.settings.leftDrawerOpen = val;
}
},
My javascript in the template:
import { ref, computed } from '@vue/composition-api'
export default {
name: 'MainLayout',
setup(props, context) {
const {$store} = context.root;
const leftDrawerOpen = computed({
get: () => $store.state.settings.leftDrawerOpen,
set: val => {
$store.commit('setLeftDrawer', val)
}
});
return {
user,
leftDrawerOpen,
miniState,
essentialLinks,
checkScope,
}
}
I also tried, but then I lost reactivity:
const {value: leftDrawerOpen } = computed({
get: () => $store.state.settings.leftDrawerOpen,
set: val => {
$store.commit('setLeftDrawer', val)
}
});
What am I coding wrong? Thanks a lot for your help in advance!
André