我正在使用Nuxt构建一个应用程序。我是第一次玩Vuex。我已经遵循了一堆教程来设置这个，但是我在访问商店时遇到了问题，我开始认为这可能与Nuxt有关。
首先，我想使用商店控制一个Vuetify对话框。
store/index.ts

import { GetterTree, ActionContext, MutationTree } from 'vuex'

export type State = ReturnType<typeof state>

// state
export const state = () => ({
  recipeFormDialog: false,
})

// getters
export const getters: GetterTree<State, State> = {
  recipeFormDialog: (state: State) => {state.recipeFormDialog},
}

// mutations
export const mutations = {
  open(state: State): void {
    state.recipeFormDialog = true
  },
  close(state: State): void {
    state.recipeFormDialog = false
  },
}

// actions
export const actions = {
  openRecipeFormDialog(context: ActionContext<State, State>): void {
    context.commit('open')
  },
  closeRecipeFormDialog(context: ActionContext<State, State>): void {
    context.commit('close')
  },
}

pages/example.vue

<template>
  <div>
    {{recipeFormDialog}}
  </div>
</template>

<script lang='ts'>

import {Component, Prop, Vue} from 'vue-property-decorator';
import {Getter} from 'vuex-class';

@Component({})
export default class ExamplePage extends Vue {
  @Getter recipeFormDialog!: boolean;
}

问题是recipeFormDialog未定义，因此不会显示在页面上。我根本无法查看该值。我是否对存储配置不正确？
我真的很想坚持使用基于类的组件和装饰器，因为我发现它比其他选择要干净得多。
提前感谢您的帮助