From 582f5e1e351b2844ccd5e910c38727833a933bc5 Mon Sep 17 00:00:00 2001
From: Changyu Geng <gcyyq@hotmail.com>
Date: Thu, 26 May 2016 11:04:48 +0800
Subject: [PATCH] Practicable usage of vuex in form input binding

Using a computed property in the component will make the state as traceable.
---
 docs/en/forms.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/docs/en/forms.md b/docs/en/forms.md
index 85a37ea90..890fd52d9 100644
--- a/docs/en/forms.md
+++ b/docs/en/forms.md
@@ -39,3 +39,34 @@ mutations: {
 ```
 
 Admittedly, this is quite a bit more verbose than a simple `v-model`, but such is the cost of making state changes explicit and track-able. At the same time, do note that Vuex doesn't demand putting all your state inside a Vuex store - if you do not wish to track the mutations for form interactions at all, you can simply keep the form state outside of Vuex as component local state, which allows you to freely leverage `v-model`.
+
+Yet an alternative approach to leverage `v-model` with state in Vuex store is to use a computed property providing a setter in the component, with all the advantages of param attributes such as lazy, number and debounce.
+
+``` html
+<input v-model="thisMessage">
+```
+``` js
+// ...
+vuex: {
+  getters: {
+    message: state => state.obj.message
+  },
+  actions: {
+    updateMessage: ({ dispatch }, value) => {
+      dispatch('UPDATE_MESSAGE', value)
+    }
+  },
+  computed: {
+    thisMessage: {
+      get () {
+        return this.message
+      },
+      set (val) {
+        this.updateMessage(val)
+      }
+    }
+  }
+}
+```
+
+The mutation remains the same.