Nuxt项目使用vuex-class访问Vuex Getters返回undefined问题咨询

开发者阿泽

2026-9-6

问题根因

获取到undefined是getter定义漏写返回值导致的，和Nuxt框架特性、类组件装饰器写法无关。
你在store/index.ts中定义的getter如下：

recipeFormDialog: (state: State) => {state.recipeFormDialog},

箭头函数使用大括号包裹函数体时，必须手动添加return才会返回执行结果，当前写法没有返回任何值，所以getter默认返回undefined。

修复步骤

修正getter返回值

两种修改方式二选一即可：

箭头函数简写（去掉大括号，自动返回表达式结果）

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

保留大括号，手动写return

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

现有装饰器写法验证

你当前使用vuex-class的@Getter装饰器配合类组件的写法完全符合规范，不需要调整。后续如果要调用弹窗开关的action，直接引入对应装饰器即可，参考示例：

<script lang='ts'>
import {Component, Vue} from 'vue-property-decorator';
import {Getter, Action} from 'vuex-class';

@Component({})
export default class ExamplePage extends Vue {
  @Getter recipeFormDialog!: boolean;
  @Action openRecipeFormDialog!: () => void;
  @Action closeRecipeFormDialog!: () => void;

  // 业务逻辑里直接调用 this.openRecipeFormDialog() 即可打开弹窗
}
</script>