v-model与Vuex中的state
Soya / 2020-06-19 / 默认分类 / 阅读量 1952

理论上,修改state的值,唯一的途径是通过mutations。所以v-model直接使用state的值会出现问题,因此,我们可以借助computed属性来解决这个场面

* store中:
const store = new Vuex.Store({
    state: {
        val: "你好,世界"
    },
    mutations: {
        changeVal(state, payload){
            state.val = payload;
        }
    }
})

* 组件中:
<input v-model="value" />
<script>
export default {
    computed: {
        value: {
            get(){
                return this.$store.state.val;
            },
            set(val){
                this.$store.commit("changeVal", val);
            }
        }
    }
}
</script>