将v-model的值绑定到vuex中时遇到的问题及解决办法（computed替代watch）

store.js如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    value: 100
  },
  mutations: {
    updateValue(state, value) {
      state.value = value
    }
  }
})

组件中使用vuex中的value：

    <el-input v-model="myValue"></el-input>
    <p>{{value}}</p>

import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      myValue: 0
    }
  },
  computed: {
    ...mapState({
      value: (state) => state.value
    })
  },
  watch: {
    myValue(newVal) {
      this.updateValue(newVal)
    }
  },
  methods: {
    ...mapMutations({
      updateValue: 'updateValue'
    })
  },
  created() {
    const { value } = this
    this.myValue = value
  }
}

思路：将vuex中的value映射到组件的myValue中，页面渲染myValue。v-model修改myValue时通过watch监听去改变vuex中的value

其实是可以有简便方法去双向绑定value的

思路：通过使用computed的get和set方法去获取和改变vuex中的value

    <el-input v-model="value"></el-input>
    <p>{{value}}</p>

  computed: {
    value() {
      return this.$store.state.value
    }
  }

页面效果：

将v-model的值绑定到vuex中时遇到的问题及解决办法（computed替代watch）

但是此时在输入框内输入或删除字符，就会报错：

将v-model的值绑定到vuex中时遇到的问题及解决办法（computed替代watch）

原因是通过v-model设置value的值，就是要触发computed，但此时value值只设置了get而没有设置set，解决：

  computed: {
    value: {
      get(){
        return this.$store.state.value
      },
      set(value) {
        this.$store.commit('updateValue', value)
      }
    }
  }

这样，就可以实现将数据双向绑定到vuex中了。

将v-model的值绑定到vuex中时遇到的问题及解决办法（computed替代watch）

相关推荐