Conocimiento previo:
- Los datos de Vuex en Estado necesitan ser modificados a través de las funciones en Mutaciones;
- La respuesta de datos de Vue implementa Object.defineProperty(), obtiene los datos en data, activa el método get(), reasigna los datos y activa el método set()
Problema:
cuando los datos en Vuex State están enlazados a través de v-model en el componente, State 中的值可以填入表单控件，但表单控件中的值发生改变，并不能同步到 State 中.
La razón es:
el enlace bidireccional de v-model, después de que el usuario opere el control de formulario, probará 直接修改los datos en Vuex State en lugar de la función en Mutations, por lo que los dos no se pueden sincronizar.
Solución 1: 利用 Computed 监听属性和 Vue 数据的 get()、set() 方法，调用 mapMutations 中的相关函数和 mapState 中的值.
// store
state:{
msg:12
}，
mutations:{
setMsg(state,val) {
state.msg = val;
},
}
// 组件
<input type="text" v-model='ismsg'></input>
<script>
import {
mapState,mapMutations,mapActions } from 'vuex';
export default {
methods:{
...mapMutations(['setMsg']),
},
computed:{
...mapState(['msg']),
ismsg:{
// 获取 ismsg 的值，触发 get 函数，返回 State 中的 msg 的值
get() {
return this.msg;
},
// 在 input 输入框重新设置 ismsg 的值，形参 val 即为最新值，将 val 通过 Mutations 中的 setMsg 函数，修改 State 中的 msg
set(val) {
this.setMsg(val);
}
}
}
}
</script>
Solución 2: no use v-model e 属性绑定和事件绑定implemente el enlace bidireccional manualmente.
// store
state:{
msg:12
}，
mutations:{
setMsg(state,val) {
state.msg = val;
},
}
<input type="text" :value="msg" @input="handleMsg">
<script>
import {
mapState,mapMutations,mapActions } from 'vuex';
export default {
data() {
return {
uname:'andy'
}
},
methods:{
...mapMutations(['setMsg']),
handleMsg(e) {
this.setMsg(e.target.value);
}
},
computed:{
...mapState(['msg']),
}
}
</script>