Skip to main content

​
Reference

​
shallow

function shallow<T>(objA: T, objB: T): boolean
A utility function that performs shallow equality comparison between two values. Used as the default equality function in useStore to prevent unnecessary reactivity updates.
​
objA
T
The first value to compare.
​
objB
T
The second value to compare.

​
Returns

​
boolean
boolean
true if the values are shallowly equal, false otherwise.

​
Comparison Behavior

The shallow function handles various data types:
  • Reference equality: Returns true if Object.is(objA, objB)
  • Primitives/null: Returns false if either value is not an object
  • Map: Compares size and all entries using Object.is
  • Set: Compares size and all values for presence
  • Date: Compares timestamps using getTime()
  • Objects: Compares own properties using Object.is

​
Usage

​
Default Behavior

<script setup>
import { useStore } from '@tanstack/vue-store'
import { store } from './store'

// shallow is used by default
const user = useStore(store, (state) => state.user)
</script>

​
Explicit Usage

<script setup>
import { useStore, shallow } from '@tanstack/vue-store'
import { store } from './store'

const user = useStore(
  store,
  (state) => ({
    name: state.name,
    email: state.email
  }),
  { equal: shallow }
)
</script>

​
Custom Comparison

<script setup>
import { useStore } from '@tanstack/vue-store'
import { store } from './store'

// Use strict reference equality instead of shallow
const items = useStore(
  store,
  (state) => state.items,
  { equal: (a, b) => a === b }
)
</script>

​
Selecting Array Slices

<script setup>
import { useStore, shallow } from '@tanstack/vue-store'
import { store } from './store'

// Shallow comparison prevents updates when array content is the same
const activeUsers = useStore(
  store,
  (state) => state.users.filter(u => u.active),
  { equal: shallow }
)
</script>

<template>
  <ul>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

​
With Nested Objects

<script setup>
import { useStore, shallow } from '@tanstack/vue-store'
import { store } from './store'

// Shallow compare only checks first-level properties
const config = useStore(
  store,
  (state) => ({
    theme: state.config.theme,
    language: state.config.language,
    // nested object compared by reference only
    advanced: state.config.advanced
  }),
  { equal: shallow }
)
</script>

​
Notes

  • Used as the default equality function in useStore
  • Only compares own properties at the first level (shallow)
  • For nested objects, only the reference is compared
  • Handles special object types: Map, Set, Date
  • Works with Vue’s reactivity system via toRaw unwrapping
  • More efficient than deep equality for most use cases