element-ui的el-input从vuex的state中获取value值后，输入框无法编辑？

Question

我想在el-input框中输入值，然后监听变化并传到state中，一开始使用的是@change，但是没有变化。看了文档后改用input，但是无法改变文本框的内容，代码如下：

<el-input placeholder="请输入内容" class="td-input" :value="inputValue" @input.native="handleInputChange"></el-input>

export default {
  name: 'app',
  data () {
    return {}
  },
  created () {
    this.$store.dispatch('getList')
  },
  computed: {
    ...mapState(['list', 'inputValue'])
  },
  methods: {
    handleInputChange (e) {
      console.log(e.target.value)
    }
  }
}

value值是绑定在vuex的的state中的

export default new Vuex.Store({
  state: {
    list: [],
    inputValue: 'test'
  },
  mutations: {
    initList (state, list) {
      state.list = list
    },
    setInputValue (state, val) {
      state.inputValue = val
    }
  },
  actions: {
    getList (context) {
      axios.get('/list.json').then(({ data }) => {
        context.commit('initList', data)
      })
    }
  },
  modules: {
  }
})

输入数字的时候console.log还是原来的内容，但是输入输入拼音的时候可以监听到变化。
页面截图

Answer 1

因为你没有改变state中inputValue的值呀

handleInputChange (e) {
      console.log(e.target.value)
    this.$store.commit('setInputValue',e.target.value)
}