Setup store with reactive

[MartinMalinda]

Hello 👋

I am wondering what's your opinion on this approach of structure within setup stores:

export const useSomeStore = defineStore('the-store', () => {
  const defaultState = {
    a: 1,
    b: 2,
  };
   const state = reactive(defaultState);

   const getters = reactive({
    doubleA: computed(() => state.a * 2),
   });

   const actions = {
    increase() {
      state.a++;
    },

    decrease() {
      state.a--;
    },
    reset() {
      Object.assign(state, defaultState);
    },
   };

   return {
    ...toRefs(state),
    ...toRefs(getters),
    ...actions,
   };
});

I can think of these points on it:

upsides

• More explicit structure?
• No need to rename, add, remove variables etc on two places
• easier to reset to default state
• easier to lookup all the places where state is changed

downsides

• a bit more verbose?
• getters have type any if one getter uses another getter (perhpas it wouldn't have to be wrapped with reactive there)