VUEの双方向バインディングを遊ぶ

最近VUEでプロジェクトを作りましたが、VUEは確かに面白いと思います.その中で双方向バインドが最も魅力的な特性です. 
テキストボックスのバインド
Reactでテキストボックスを書きます.

class TextBox extends Component {
  constructor(props) {
    super(props);
    this.state = { txtValue: 'hello world' };
    this.setTxtValue = this.setTxtValue.bind(this);
  }
  setTxtValue(e) {
    this.setValue({txtValue: e.target.value})
  }
  render() {
    return (
      

        
      
    )
  }
}

データを取るためにはイベント処理を専門に書き、bindも書かなければならない.うるさい.テキストボックスが10個来たら、指が耐えられないし、目も耐えられない.VUEの偉大さを見てみましょう

export default {
  data() {
    return {
      txtValue: 'hello world'
    }
  }
}

一目で最後まで見たので,さっぱりしている. 
checkboxとradioのバインド
ドアに入るともっと面白い例を見て、アンケートをします.
データ駆動である以上、まずデータモデルを設計します.

  sessions：[  //            session
    {
      question: '3. Which langurage are you using?',  //    
      type: 'checkbox',  //     ，  、  
      answer: [],        //      
      value: '',         //      
      errMsg: '',        //     
      options: [         //      
        {
          label: 'Java', 
          value: '1',
        },
        ...              //      
      ]
    },
    ...                  //    session
  ]

コンポーネントを設計し、セッションを表示

export default {
  props: ['session'],
  methods: {
    handleRadio(session) {
      session.answer = [ session.value ]
    },
  }
}

セッションを受信して表示すると、セッションのタイプに応じてバインドが異なります.

タイプが複数選択の場合、inputの値はsessionにバインドされる.answer,結果は,['1','2']

のような配列である.

タイプがラジオの場合、inputの値はsessionにバインドされます.value、結果は'1'のような値です.効果を統一するために、1つの処理を加えてラジオの結果もsessionに入れる.answer,例えば['1']グローバルな状態管理としてvuexを導入した:

Vue.use(Vuex);
var state = {
  sessions: [
    {
      question: '3. Which langurage are you using?',
      type: 'checkbox',
      answer: [],
      value: '',
      errMsg: '',
      options: [
        {
          label: 'Java',
          value: '1',
        },
        {
          label: 'python',
          value: '2',
        },
        {
          label: 'C',
          value: '3',
        },
        {
          label: 'swift',
          value: '4',
        },
      ]
    },
    ...
  ]
}
var actions = {
  submitAnswer({ commit, state }) {
    ...
  }
}
const store = new Vuex.Store({
  state, actions
})
export default store;

Reduxを使ったことのある同級生は端緒を見ましたか.dispatchを使わず、reducerを使わず、storeの中のデータはコンポーネントに直接バインドされており、変化するとすぐにUIの更新がトリガーされ、退屈なコードが省けます.また、storeの深層データが変化しても、vueは自然に監査し、ページを更新することができます.Reactとは異なり、割り当て値またはcombineReducerを解析します.次はもう一段、コンポーネントを導入し、リサイクルします.

import Session from '../session';
export default {
  components: {
    Session
  },
}

次のような効果が得られます
VUEでは、dispatchは、データの送信などの非同期actionをトリガするために使用され、ここではデータバインディングのみが議論される.Reactに比べて、VUEのデータバインディングは冗長なコードを減らし、開発者がビジネスに専念できるようにします.