如何使用vuex级访问nuxt

Question

我正在使用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 是未定义的，因此不会在页面上显示。我根本无法查看该值。我是否不正确地配置商店？

我真的很想坚持基于班级的组件和装饰器，因为我发现它比替代方案要干净得多。

事先感谢您的帮助

Answer 1

对于其他观察此问题的人来说，“ Vue-Property-decorator”似乎取决于“ Vue-Class-Component”，这在VUE3中不支持，这解释了为什么我无法访问值

...在这里信息