Vue中使用v-model实现表单元素数据双向绑定到组件中data中的变量。最近在开发naive-desktop-translator时,遇到一个需求,需要把表单元素直接通过v-model绑定到vuex中的state值上。在网上搜索后,参考这篇博客的解决方案,先使用v-model绑定到组件内的一个computed计算属性上,再通过自定义该计算属性的getset方法,对vuex中的状态变量进行读取、写入操作。模板代码如下:

<template>
   <div>
     <!-- v-model bind to local computed property 'message' -->
     <input v-model="message" placeholder="type something...">
     {{ message }}
   </div>
 </template>
 
 <script>
 export default {
   name: 'input-component',
   computed: {
     message: {
       // custome get() and set() of this local computed property
       get () {
         // get stored message
         return this.$store.state.message;
       },
       set (newMessage) {
         // commit a mutation to set message
         this.$store.commit('setMessage', newMessage);
       }
     }
   }
 }
 </script>
 
 <style scoped>
 </style>
 

该模板文件代码:

 

其他的参考:

vuex文档:https://vuex.vuejs.org/zh/

vue文档中计算属性的getter与setter部分:https://cn.vuejs.org/v2/guide/computed.html#计算属性的-setter

分类: Vue

0 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注