There seems to be an issue with updating the state variable when changing the value in the input field.
Although the state variable does change, it may not reflect immediately in the Dev tools. You can confirm this by modifying the template as follows:
<template>
<div>
<input type="text" v-model="$store.state.myvalue">
<div>{{ $store.state.myvalue }}</div>
</div>
</template>
It's worth noting that directly mutating Vuex state like this is generally discouraged. It is recommended to use mutations for state changes as they make tracking changes easier and more structured. Mutations are essentially functions called when a state change is required.
To achieve 2-way data binding against Vuex state, computed properties with getter/setter methods can be utilized. Here's an example:
<template>
<div>
<input v-model="myvalue">
<div>{{ myvalue }}</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
computed: {
myvalue: {
get: function() {
return this.$store.state.myvalue;
},
set: function(value) {
this.$store.commit("change_myvalue", value);
}
}
}
};
</script>
A corresponding mutation should be defined in your store for this setup to work effectively:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
myvalue: ""
},
mutations: {
change_myvalue(state, value) {
state.myvalue = value
}
},
actions: {},
modules: {}
});
For further information on mutations, you can refer to the documentation here.