Currently, I am delving into Vuex and facing a roadblock in my endeavor to have the number value change each time the p-element is clicked. The mutation responsible for this is called changeNumber. Additionally, I aim to display the updated number value within the same p-element. Although I have made some progress with the code below, I find myself stuck:
let object = {
}
let state = {
object,
someArray: [],
someBool: true,
counter: 0,
someOtherValue: 'Text'
}
let changeNumber = {
increment(state) {
state.counter += 1
}
}
let store = new Vuex.Store({
changeNumber,
state
})
Vue.component('counter-button', {
computed: {
counter() {
return this.$store.state.counter
}
},
template: `<input :value="$store.state.counter" @click="$store.commit('increment')" type="button">`
})
Vue.component('some-component', {
computed: {
someOtherValue() {
return this.$store.state.someOtherValue
}
},
template: '<div>{{ someOtherValue }}</div>'
})
new Vue({
el: '#app',
store,
template: '<some-component></some-component>',
})