Michael Thiessen

The Data Store Pattern

Invalid Date

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

Here's a simple example:

useUserSettings.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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,

  }

}

Related Articles