Store is undefined - Vue3 (Composition API), Vuex4, TypeScript

Question

I have migrated a personal project from Vue2 to Vue3 but have stumbled upon an error, I can't seem to figure out how to fix - So I'm hoping someone here can help me.

I have tried googling, reading lots of threads and documentation from multiple sites. But nothing have worked or gotten me closer.

I tried to restructure the Vuex store since a thread suggested that, but it made no difference. I tried to change the imports away from relative paths, but it made no difference. I tried to delete the store in my component to make sure that my component works as expected - It does.

So now I'm hoping someone here can help me, since I think I'm just asking the wrong questions and looking for the wrong answers.

So here we go and pardon my poor code, still learning.

Versions from package.json:

{
  "name": "project",
  "version": "0.0.1",
  "description": "description",
  "productName": "my app",
  "author": "author",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue ./",
    "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "core-js": "^3.6.5",
    "quasar": "^2.0.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.1"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.13.14",
    "@quasar/app": "^3.0.0",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
    "eslint": "^7.14.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.5.1"
  },
  "browserslist": [
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 12.22.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

Error from the console:

TypeError: store.state.alarmStore is undefined
    alarms AllAlarms.vue:16
    run reactivity.esm-bundler.js:187
    get value reactivity.esm-bundler.js:1150
    sortedAlarms AllAlarms.vue:39

AllAlarms.vue

<template>
  <q-page class="bg-dark">
    <page-header
      title="Alarmer"
      :left-button="leftButton"
      :right-button="rightButton"
    />
    <alarm-item-list :alarms="sortedAlarms" :edit-mode="editMode" />
  </q-page>
</template>

<script lang="ts">
import { computed, ComputedRef, defineComponent, Ref, ref } from 'vue';
import { Router, useRouter } from 'vue-router';
import { Store } from 'vuex';
import { StateInterface, useStore } from 'src/store';
import { Alarm, HeaderButton } from 'src/components/models';
import PageHeader from 'src/components/PageHeader.vue';
import AlarmItemList from 'src/components/AlarmItemList.vue';

export default defineComponent({
  name: 'AllAlarms',
  components: { AlarmItemList, PageHeader },
  setup() {
    const router: Router = useRouter();
    const store: Store<StateInterface> = useStore();
    // The line below is the line 16 in the error
    const alarms: ComputedRef<Array<Alarm>> = computed( 
      () => store.state.alarmStore.alarms
    );
    const editMode: Ref<boolean> = ref(false);
    const leftButton: ComputedRef<HeaderButton> = computed(() => {
      return {
        icon: editMode.value ? 'close' : 'settings',
        label: editMode.value ? 'Close' : 'Settings',
        onClick: () => {
          editMode.value = !editMode.value;
        },
      };
    });
    const rightButton: HeaderButton = {
      icon: 'add',
      label: 'Add',
      onClick: () => {
        void router.push({
          name: 'create',
        });
      },
    };
    const sortedAlarms: ComputedRef<Array<Alarm>> = computed(() => {
      // The line below is the line 39 from the error
      const _alarms: Array<Alarm> = [...alarms.value];
      return _alarms.sort((a1: Alarm, a2: Alarm): number => {
        return a1.triggerTime.getTime() - a2.triggerTime.getTime();
      });
    });

    return {
      leftButton,
      rightButton,
      editMode,
      sortedAlarms,
    };
  },
});
</script>

src/store/index.ts

import { store } from 'quasar/wrappers';
import { InjectionKey } from 'vue';
import {
  createStore,
  Store as VuexStore,
  useStore as vuexUseStore,
} from 'vuex';

import alarm from 'src/store/alarm';
import { AlarmStateInterface } from 'src/store/alarm/state';
import melody from 'src/store/melody';
import { MelodyStateInterface } from 'src/store/melody/state';

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */

export interface StateInterface {
  // Define your own store structure, using submodules if needed
  alarmStore: AlarmStateInterface;
  melodyStore: MelodyStateInterface;
}

// provide typings for `this.$store`
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: VuexStore<StateInterface>;
  }
}

// provide typings for `useStore` helper
export const storeKey: InjectionKey<VuexStore<StateInterface>> =
  Symbol('vuex-key');

export default store(function (/* { ssrContext } */) {
  const Store = createStore<StateInterface>({
    modules: {
      alarm,
      melody,
    },

    // enable strict mode (adds overhead!)
    // for dev mode and --debug builds only
    strict: !!process.env.DEBUGGING,
  });

  return Store;
});

export function useStore() {
  return vuexUseStore(storeKey);
}

src/store/alarm/index.ts

import { Module } from 'vuex';
import { StateInterface } from '../index';
import state, { AlarmStateInterface } from './state';
import actions from './actions';
import getters from './getters';
import mutations from './mutations';

export default {
  namespaced: true,
  actions,
  getters,
  mutations,
  state,
} as Module<AlarmStateInterface, StateInterface>;

src/store/alarm/state.ts

import { Alarm } from 'src/components/models';

export interface AlarmStateInterface {
  newAlarm: Alarm;
  updatableAlarm: Alarm;
  alarms: Array<Alarm>;
}

function state(): AlarmStateInterface {
  return {
    newAlarm: {
      id: 0,
      active: true,
      triggerTime: new Date(),
      specificDays: {
        mon: false,
        tue: false,
        wed: false,
        thu: false,
        fri: false,
        sat: false,
        sun: false,
      },
      melody: {
        id: 0,
        name: '',
        filePath: '',
      },
    },
    updatableAlarm: {
      id: 0,
      active: true,
      triggerTime: new Date(),
      specificDays: {
        mon: false,
        tue: false,
        wed: false,
        thu: false,
        fri: false,
        sat: false,
        sun: false,
      },
      melody: {
        id: 0,
        name: '',
        filePath: '',
      },
    },
    alarms: [
      {
        id: 1,
        active: true,
        triggerTime: new Date('2022-03-26T07:20:00'),
        specificDays: {
          mon: true,
          tue: false,
          wed: true,
          thu: false,
          fri: true,
          sat: false,
          sun: false,
        },
        melody: {
          id: 1,
          name: 'Melodi 1',
          filePath: 'TODO',
        },
      },
      {
        id: 2,
        active: false,
        triggerTime: new Date('2022-03-26T07:15:00'),
        specificDays: {
          mon: false,
          tue: true,
          wed: false,
          thu: true,
          fri: false,
          sat: true,
          sun: true,
        },
        melody: {
          id: 1,
          name: 'Melodi 1',
          filePath: 'TODO',
        },
      },
      {
        id: 3,
        active: true,
        triggerTime: new Date('2022-03-26T07:19:00'),
        specificDays: {
          mon: false,
          tue: false,
          wed: true,
          thu: true,
          fri: true,
          sat: true,
          sun: false,
        },
        melody: {
          id: 1,
          name: 'Melodi 1',
          filePath: 'TODO',
        },
      },
    ],
  };
}

export default state;

I'm sorry for the many lines of code - Just hoping someone spot the mistake I have made. Let me please know if any other information is needed.

Thank you in advance.

EDIT: As Estus Flask mentioned:

export default store(function (/* { ssrContext } */) {
  const Store = createStore<StateInterface>({
    modules: {
      alarmStore: alarm, // I updated this
      melodyStore: melody, // And this
    },

    // enable strict mode (adds overhead!)
    // for dev mode and --debug builds only
    strict: !!process.env.DEBUGGING,
  });

  return Store;
});

Answer 1

As Estus Flask mentioned:

There's no alarmStore. You called the module alarm.

I have updated the question with the answer at the bottom - Just a blind mistake.