The simplest solution to lots of state management problems is to use a composable to create a shareable data store. This pattern has a few parts: 1. A global state singleton 2. Exporting some or all of this state 3. Methods to access and modify the state

simple-reactive-vue-state.js

/*
 * The simplest solution to lots of state management problems is to use a composable to create a shareable data store.
 * 
 * This pattern has a few parts:
 * 
 * A global state singleton
 * Exporting some or all of this state
 * Methods to access and modify the state
 */
import { reactive, toRefs, readonly } from 'vue';
import { themes } from './utils';

// 1. Create global state in module scope, shared every
//    time we use this composable
const state = reactive({
  darkMode: false,
  sidebarCollapsed: false,
  // 2. This theme value is kept private to this composable
  theme: 'nord',
});

export default () => {
  // 2. Expose only some of the state
  //    Using toRefs allows us to share individual values
  const { darkMode, sidebarCollapsed } = toRefs(state);

  // 3. Modify our underlying state
  const changeTheme = (newTheme) => {
    if (themes.includes(newTheme)) {
      // Only update if it's a valid theme
      state.theme = newTheme;
    }
  }

  return {
    // 2. Only return some of the state
    darkMode,
    sidebarCollapsed,
    // 2. Only expose a readonly version of state
    theme: readonly(state.theme),
    // 3. We return a method to modify underlying state
    changeTheme,
  }
}