After setting up my vuex store and ensuring that everything is functioning properly, I encountered an issue where I can only commit mutations in components that are directly imported into src App.vue.
For instance, the resetState function in Header.vue successfully triggers when I click the button because it is imported directly in src/App.vue
<template>
<v-btn
icon
to="/"
id="no-background-hover"
@click="resetState"
>
///
</v-btn>
</template>
<script lang="ts">
import Vue from 'vue'
import { MutationTypes } from '@/store/mutation-types'
export default Vue.extend({
name: 'Header',
methods: {
resetState () {
this.$store.commit(MutationTypes.RESET_STATE, 0)
}
},
})
</script>
However, when the same component is present in any of my routed views/BlahBlahBlah.vue, nothing happens upon clicking the button
Below is the content of main.ts
import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'
import App from './App.vue'
import router from './router'
import './assets/sass/index.sass'
import store from './store'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
Vue.use(VueTypedJs)
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')