Vuex 的项目实例3 文本框的双向绑定

1、在 store/index.js 中定义新的数据 inputValue ：

state: {
    list: [], // 所以的任务列表
    inputValue: 'aaa' // 文本框的内容
},

2、回到 Home.vue 做文本框的双向绑定：

<a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" />

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['list', 'inputValue'])
  }
}
</script>

3、给文本框添加改变事件：

<a-input placeholder="请输入任务" class="my_ipt"
     :value="inputValue" @change="handleInputChange" />

<script>
import { mapState } from 'vuex'
export default {
  methods: {
    // 监听文本框内容变化
    handleInputChange(e) {
      console.log(e.target.value)
    }
  }
}
</script>

此时在文本框输入2，控制台会打印出：aaa2

4、重新给 inputValue 赋值：

打开 store/index.js 文件，定义 mutations 函数：

mutations: {
    // 为 state 中的 inputValue 赋值
    setInputValue(state, val) {
      state.inputValue = val
    }
}

回到 Home.vue 文件中，编辑 handleInputChange ：

// 监听文本框内容变化
    handleInputChange(e) {
      console.log(e.target.value)
      // commit 的作用，就是调用某个 mutation 函数
      this.$store.commit('setInputValue', e.target.value)
    }