Currently, I am in the process of developing an application using Nuxt and experimenting with vuex for the first time. Despite following numerous tutorials to set it up, I'm encountering difficulties accessing the store and suspect that the issues may be related to Nuxt.
My initial goal is to manage a Vuetify dialog through the store.
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;
}
The issue lies in the fact that recipeFormDialog is currently undefined, preventing it from displaying on the page. Thus far, I have been unable to retrieve the value at all. Could the store configuration be the source of this problem?
I strongly prefer utilizing class-based components and decorators as they offer a cleaner alternative. Any help provided would be greatly appreciated.
Thank you in advance for your assistance