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) }