I have come across similar questions with comparable titles, but I find them too complex to follow. I believe that by sharing my code, it will facilitate finding a solution for me. Below is the relevant code snippet.
This is my store setup: Note: I have included the Vuex plugin.
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
const state = {
title: "please, change title"
}
const mutations = {
changeTitle(state, newTitle) {
state.title = newTitle;
}
}
export default new Vuex.Store({
state: state,
mutations: mutations
})
In my App.vue file:
<template>
<div>
<show-title-component></show-title-component>
<change-title-component></change-title-component>
</div>
</template>
<script>
import ShowTitleComponent from './components/ShowtitleComponent';
import ChangeTitleComponent from './components/ChangeTitleComponent';
import store from './vuex/store';
export default {
components: { ShowTitleComponent, ChangeTitleComponent },
store,
data() {
return { title: 'placeholder' }
}
}
</script>
The component causing the error:
<template><div>{{ title }}</div></template>
<script>
export default {
name: "show-title-component",
computed: {
title() {
return this.$store.state.title /** error occurs here */
}
}
}
</script>