前置知识：
- Vuex 在 State 中的数据需要通过 Mutations 里面的函数进行修改；
- Vue 数据响应式实现 Object.defineProperty( )，获取 data 中的数据，触发 get() 方法，数据重新赋值，触发 set() 方法
问题：
当 Vuex State 中的数据在组件中通过 v-model 进行数据绑定，State 中的值可以填入表单控件，但表单控件中的值发生改变，并不能同步到 State 中。
原因在于：
v-model 的双向绑定，在用户向表单控件进行操作后，会试图直接修改 Vuex State 中的数据，而不是通过 Mutations 中的函数，所以导致二者的不能同步。
解决方法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>
解决方法2：不使用 v-model，通过属性绑定和事件绑定手动实现双向绑定。
// 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>