I am building an application using Nuxt. I am playing with vuex for the first time. I have followed a bunch of tutorials to get this set up, but I am running into issues accessing the store and I am starting to think it may be related to Nuxt.
To start, I'd like to control a Vuetify dialog using 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 problem is that recipeFormDialog is undefined and thus will not show on the page. I have not been able to view the value at all. Am I configuring the store improperly?
I would really like to stick with the class-based components and decorators because I find it to be much cleaner than the alternative.
Thanks in advance for the assistance
