Vue.js 2, composition api and vuex

Get Help
#1

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é

#2

Hi,

Do you have a link to play with?
Because it works for me.

<input v-model="leftDrawerOpen"/>

const leftDrawerOpen = computed({
  get: () => $store.state.settings.leftDrawerOpen,
  set: (val: string) => {
    $store.commit('setLeftDrawer', val)
  }
});
#3

Hi shenron,
thanks a lot for your help. When I tried again it worked for me too 8-S

Thanks a lot for your help!