將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設置value的值，就是要觸發computed，但此時value值只設置了get而沒有設置set，解決：

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

這樣，就可以實現將數據雙向綁定到vuex中了。