After browsing through multiple forums, I haven't found a solution that works for my particular issue with my VueJS app. The problem arises when I try to input something in my first component. Below is the code snippet:
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
item: ''
},
mutations: {
change(state, item) {
state.item = item
}
},
actions: {
change({ commit }, newValue) {
commit('change', newValue);
}
},
getters: {
item: item => state.item
}
})
App.vue
<template>
<div id="app">
<AddItem/>
<DisplayItem/>
</div>
</template>
<script>
import AddItem from './components/AddItemComponent'
import DisplayItem from './components/DisplayItemComponent'
export default {
name: 'App',
components: {
AddItem,
DisplayItem
}
}
</script>
AddItemComponent.vue
<template>
<div>
<label for="item">Item Name</label><br/>
<input type="text" name="item" @input="changed">
</div>
</template>
<script>
export default {
methods: {
changed: function (event) {
this.$store.dispatch('change', event.target.value)
}
}
}
</script>
DisplayItemComponent.vue
<template>
<div>
<p>Item Name : {{ $store.getters.item }}</p>
</div>
</template>
...and it's accompanied by an error
https://i.stack.imgur.com/Dm9Mi.png
Despite trying numerous approaches, none of them seem to resolve the issue. Could it be that I missed something?
Thank you for your assistance in advance.