Defining a store with TypeScript left me with questions about reactivity

[JoostKersjes]

Code

// useStore.ts
import { defineStore } from "pinia";

export const useStore = defineStore({
  id: "main",
  state: () => ({}),
});

// App.vue
<script setup lang="ts">
import { useStore } from "./useStore";
const store = useStore();
  
store.$patch({
  property: 3,
});
</script>

<template>
  <span>Property: {{ store.property }}</span>
</template>

Problem

Accessing store.property in the <template> will always give undefined and is not reactive.

Why do I expect it to be reactive? When would I want to set a property that isn't described in the state?

I fell into this "trap" because I added a StoreState interface. I marked a property as optional with ?:. With that interface, I can initialize the store without setting a value for the property.

// useStore.ts
import { defineStore } from "pinia";

interface StoreState {
  property?: number;
}

export const useStore = defineStore({
  id: "main",
  state: (): StoreState => ({}),
});

Because I couldn't find any clear documentation on why my store.property wasn't reactive, I assumed that accessing properties like that just were never reactive. This assumption grew even stronger when I figured out that accessing it through store.$state.property is reactive.

Again, I couldn't find any clear documentation that accessing properties without going through $state are supposed to be reactive, so I changed pretty much all of the code where I access store properties to go through $state, just in case.

// App.vue
<script setup lang="ts">
import { useStore } from "./useStore";
const store = useStore();
  
store.$patch({
  property: 3,
});
</script>

<template>
  <span>Property: {{ store.$state.property }}</span>
</template>

I realized after messing around for too long, that going through $state isn't required to have a reactive reference.

Solution

To fix the problem of store.property not being reactive, you simply need to make sure the property exists in the initial state. The type definition can be changed from property?: number; to property: number | undefined; to enforce this.

// useStore.ts
import { defineStore } from "pinia";

interface StoreState {
  property: number | undefined;
}

export const useStore = defineStore({
  id: "main",
  state: (): StoreState => ({
    property: undefined,
  }),
});

My questions

1. Is it a best-practice to set the initial state with all of the properties defined, even if some of them are undefined?
2. Why does my problematic code work if I access the property through $state?
3. Should this behaviour be mentioned in the docs? Maybe here? https://pinia.vuejs.org/core-concepts/state.html#typescript

[posva]

1. Yes
2. It still doesn’t work: store.property won’t exist
3. Isn’t mentioned already that state should define all initial properties? If not pr is welcome to the state page