An update has been made to this post, please refer to the first answer
After thorough research, I couldn't find a solution to my issue despite checking several threads. This is my first time using the Quasar framework and it seems like I might have overlooked something in the namespaces or similar.
Here are some key points: + No errors show up when compiling with ESLint + No errors appear in my JavaScript console during runtime The problem I'm facing: + Although my actions and mutations save data in the store, they do not save it where expected (refer to the screenshot at the end of the post) + My getter doesn't seem to work as intended and displays "undefined" in the Vue dev tool
This is how my store is structured:
+store [folder]
+ index.js
+ app-utils [folder]
--+ index.js
--+ getters.js
--+ actions.js
--+ mutations.js
--+ state.js
Code snippet from the root index.js :
import Vue from 'vue'
import Vuex from 'vuex'
import appUtils from './app-utils'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
appUtils
}
})
export default store
Inside the 'app-utils' folder: Code for index.js :
import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
Code for state.js :
export default {
state: {
currentPageTitle: 'Hello'
}
}
Code for getters.js :
export const getPageTitle = (state) => {
console.log('GET TITLE: ' + state.currentPageTitle)
return state.currentPageTitle
}
Code for mutations.js :
export const setPageTitle = (state, newPageTitle) => {
console.log('MUTATION SET TITLE: ' + newPageTitle)
state.currentPageTitle = newPageTitle
}
export const deletePageTitle = (state) => {
console.log('MUTATION DELETE TITLE')
state.currentPageTitle = ''
}
Code for actions.js :
export const setPageTitle = (context, newPageTitle) => {
console.log('ACTION SET TITLE: ' + newPageTitle)
context.commit('setPageTitle', newPageTitle)
}
export const deletePageTitle = (context) => {
console.log('ACTION DELETE TITLE')
context.commit('deletePageTitle')
}
The code snippet where I am attempting to access it (in the getPageTitle computed field):
<template>
<q-page>
<q-resize-observable @resize="onResize" /> TITLE : {{getPageTitle}}
<div class="row">
</div>
</q-page>
</template>
import { mapGetters, mapActions } from 'vuex'
export default {
data: () => ({
pageSize: {
height: 0,
width: 0
}
}),
mounted () {
this.setPageTitle('Template manager')
},
destroyed () {
this.deletePageTitle()
},
computed: {
...mapGetters('appUtils', [
'getPageTitle'
])
},
methods: {
...mapActions('appUtils', [
'setPageTitle',
'deletePageTitle'
]),
onResize (size) {
this.pageSize = size
}
}
}
</script>
<style>
</style>
Lastly, attached is a screenshot from the Vue plugin showing that the value is set upon triggering the mounted() hook but not reflected in the 'state', and the getter remains undefined.
Screenshot from the Vue Dev Plugin