标签：imp methods input back 添加 putc method 双向 put
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) }
标签：imp methods input back 添加 putc method 双向 put
原文地址：https://www.cnblogs.com/joe235/p/12738241.html
