Toggle changing AppState

[JokerMartini]

How do I update my AppState when a user clicks a Toggle control? I'm developing this app in the composition api which I've only done a few times before. So I'm asking for help to better understand the ideal approach here. Below are the main components contributing to question.

In short my Toggle controls an AppSetting value called isUserAllowed, which is a boolean value. I'm trying to keep all my AppSettings within an Object for better organization, knowing ill add more Settings in the future. My AppSettings object is nested under AppState.

The error occurs when the user clicks the toggle button. I'm not clear on how to best create a getters.ts and actions.ts which later calls the mutations.ts

I know this may seem like a basic question but it will help me move forward with the rest of the application.
I've added a link to my project files via dropbox if you wish to open the stripped down version of the app showing the problem. It contains everything but the node_modules folder to keep the filesize small > Source Files

types.ts

export interface AppSettings {
    isUserAllowed: boolean;
}

export interface AppState {
    isBusy: boolean;
    settings: AppSettings;
}
  

settings.vue

<template>
  <q-page>
    <q-toggle color="primary" v-model="settings.isUserAllowed" />
  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from '@vue/composition-api';
import { AppSettings } from 'src/models/types';

export default defineComponent({
  name: 'Settings',
  components: {},
  setup(props, {emit, root}) {
    const settings = computed({
      get: () => root.$store.getters['app/settings'],
      set: val => {   }
    });
    
    return { settings };
  }
});
</script>

getters.ts

import { GetterTree } from 'vuex';
import { StateInterface } from '../index';
import { AppState } from 'src/models/types';

const getters: GetterTree<AppState, StateInterface> = {
  isBusy: state => state.isBusy,
  settings: state => state.settings
};

export default getters;

state.ts

import { AppState } from 'src/models/types';

const state: AppState = {
  isBusy: false,
  settings: {
    isUserAllowed: false,
  }
};

export default state;

mutations.ts

import { MutationTree } from 'vuex';
import { AppState, AppSettings } from 'src/models/types';

const mutation: MutationTree<AppState> = {
  setIsBusy(state, payload: boolean) {
    state.isBusy = payload;
  },
  setSettings(state, payload: Partial<AppSettings>) {
    state.settings = {
      ...state.settings,
      ...payload
    };
  },
};

export default mutation;

actions.ts

import { ActionTree } from 'vuex';
import { StateInterface } from '../index';
import { AppState, AppSettings } from 'src/models/types';

const actions: ActionTree<AppState, StateInterface> = {
  setSettings({ commit, dispatch }, payload: Partial<AppSettings>) {
    commit('setSettings', payload);
  },
};

export default actions;

[TobyMosque]

u're trying to mutate the state directly.
just to be clear, what is being mapped, is the settings, not the property called isUserAllowed, so update that, will not trigger the set.

so, u would do something like:

    const isUserAllowed = computed({
      get: () => root.$store.getters['app/settings'].isUserAllowed,
      set: val => { root.$store.commit('app/setSettings', { isUserAllowed: value })  }
    });

since I'm spreading for the 4 winds to not use vuex, here the converted version of your module:

import { reactive } from 'vue'

export interface AppSettings {
  isUserAllowed: boolean;
}

export interface AppState {
  isBusy: boolean,
  settings: AppSettings
}

let _state: AppState | null = null
function getState (): AppState {
  if (!_state) {
    _state = reactive({
      isBusy: false,
      settings: {
        isUserAllowed: false
      }
    })
  }
  return _state
}

export function createApp () {
  const state = getState()

  function setIsBusy (val: boolean): void {
    state.isBusy = val
  }

  function patchSettings (val: Partial<AppSettings>) {
    const entries = Object.entries(val) as [keyof AppSettings, never][]
    for (const [key, value] of entries) {
      state.settings[key] = value
    }
  }

  return {
    state,
    setIsBusy,
    patchSettings
  }
}

and in your page:

import { defineComponent, computed } from '@vue/composition-api';
import { createApp } from 'path/to/somewhere';

export default defineComponent({
  name: 'Settings',
  components: {},
  setup(props, {emit, root}) {
    const app = createApp()
    const settings = computed({
      get: () => app.settings.isUserAllowed
      set: val => app.patchSettings({ isUserAllowed: val })
    });
    
    return { settings };
  }
});

but serious, u don't even need that computed:

import { defineComponent, toRefs } from '@vue/composition-api';
import { createApp } from 'path/to/somewhere';

export default defineComponent({
  name: 'Settings',
  components: {},
  setup(props, {emit, root}) {
    const app = createApp()
    const settings = toRefs(app.settings);
    return { settings };
  }
});

[JokerMartini]

is it bad practice to have it setup this way. i figured it was nice to have the getter, mutation and setters using the Partial to avoid writing tons of methods for each property.

[TobyMosque]

i updated the answer with a personal note.

[JokerMartini]

thanks for sharing your knowledge. i liked the first approach you provided as well, it seemed very straightforward and simple enough to use as welll.