拆掉 v-model + computed get/set 到 vuex

为什麽要特别写 Form 表单攻略呢？
因为这是使用者可以输入资料的常见途径，一种可以「写入」资料的方式。

为了使用者可以将资料好好的写入，单一资料流安排了一系列的旅程让资料流动。
下面来图解一下上一次的程序码与官网推荐的写法差在哪，各有什麽好坏。

从画面到 vuex

用官网教的方式

官方网站的 Two-way Computed Property 其实也是示范直接用 commit 。过我们还是在第一版遵守「要用 dispatch 触发 commit」的规则。

虽然这个规则有可能是要说「从 dispatch 要怎麽更新 state 的建议」

每一个区块，都是一段程序码，都是一个可能出现 bug 的地方。
所以，我想要将这一切变紧凑一点，并且让「不要出现简单逻辑的赘 code 」

不要用 dispatch ，直接用 commit

就连官网教学，都不这麽做了，为什麽不照官网示范呢？
其实，我不建议这种教条式的学习方式。XDDD

没有什麽一定要或一定不要，只有优缺点比较。

优点:

• 看见程序码可以直接区分同步动作与非同步动作。
• 少了一段 dispatch 直接送给 commit 的赘 code

将 v-model + computed(get/set) 的组合写法拿掉

将 computed 里 get/set 的内容拆下来，不用写 this 直接写在 template。
整个资料流的 code 就变得更理想。

我承认这个做法，只是我个人的偏好，与官网建议并不一样。
没错！来看看优缺点

优点

• 多个栏位绑定时，省掉多组的 computed(get/set) 的赘 code
• 比起用 v-model 的优雅，没有粗糙很多 (好好好...这很主观)
• 加强 script 的区段「只存放复杂逻辑」的意义

缺点

• 无法在 template 优雅的使用 v-model
• 复杂逻辑无法使用

变化

1. 如果 :value=$store.getters.user.name 变得很复杂怎麽办？

例如要过滤呀，要条件，要整理资料才可以用呀！这些怎麽办？

• 如果属於资料逻辑，写在 getters
• 如果属於画面逻辑，写成 computed (不用 get/set) ，在 template 绑成一个变数
  ex: :value="userName"

2. 如果 @input="$store.commit('user', { ...data, name: $event })"

如果，name 出来之後，还要栏位验证，还检查是不是 C 开头？之类的，或者要转成另一种文字再储存，如果是数字有可能遇到转成另一个单位再储存，这些怎办？

• 如果属於资料逻辑，写在 mutation
• 如果属於画面逻辑，写成 method ，在 template 绑成一个 method name
  ex: @input="="updateUserName"

虽然 v-model + computed(get/set) 的做法一样可以面对这种复杂的程序码
但是，它却无法将「简单逻辑」与「复杂逻辑」区分开来。

这样一来，就完全不会用到 computed + get/set

将写法紧凑，是让我对 vue 的一种革命性的体验。

最重要的一个关键就是不怕将栏位储存到 vuex 并且也不怕一个栏位一个栏位的绑起来

而且，其实仔细看 mutation 并不会依照栏位一个一个开，而 getters 也不会一个一个开。
多个栏位的绑定对於初学 vue + vuex 的人来说，是一场恶梦，因为官网并没有任何指引告诉你该怎麽避免增长不必要的复杂度。