Jelajahi Sumber

在表单绑定中使用 vuex 的另一个可行方案 (#190)

在组件中使用计算属性可以使得状态继续保持可跟踪,同时又可方便地使用 v-model 的其他特性。
Changyu Geng 9 tahun lalu
induk
melakukan
f3ab2d3bbd
1 mengubah file dengan 31 tambahan dan 0 penghapusan
  1. 31 0
      docs/zh-cn/forms.md

+ 31 - 0
docs/zh-cn/forms.md

@@ -34,3 +34,34 @@ mutations: {
 ```
 
 必须承认,这样做比简单地使用 `v-model` 要啰嗦得多,但这换来的是 state 的改变更加清晰和可被跟踪。另一方面,Vuex **并不**强制要求所有的状态都必须放在 Vuex store 中 —— 如果有些状态你觉得并没有需要对其变化进行追踪,那么你完全可以把它放在 Vuex 外面(比如作为组件的本地状态),这样就可以愉快地使用 `v-model` 了。
+
+此外,如果仍然希望使用 Vuex 管理跟踪状态,并愉快地使用 `v-model`,还可以在组件中使用带 setter 的计算属性,这样,你就可以使用诸如 lazy、number 和 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)
+      }
+    }
+  }
+}
+```
+
+mutation 保持不变。