vuex的表单处理答案

【问题标题】：Form Handling of vuexvuex的表单处理
【发布时间】：2018-09-26 09:07:08
【问题描述】：

我有两个计算来显示 Vuex 的状态数据：

computed:{
    dataTab:function(){
      return this.$store.state.form;
    },
        ...Vuex.mapState({
            mapA: state=>state.form.a
    }),
  },

我阅读了一些关于计算的文档。计算将运行 Object.defineProperty() 为 vue 实例创建新属性。这意味着 dataTab 与 this.$store.state.form 或 mapA 与 state.form.a 没有关系，对吧？ .但是当我使用 v-model 修改 dataTab 或 mapA 时 state.form.a 会改变。为什么会这样？以及为什么 dataTab 或 mapA 没有计算的 setter 但它不显示错误？

这是我的代码示例：https://jsfiddle.net/hoanghung1995/eywraw8t/395022/

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案1】：

所以有一些误解。

在 vue 实例（Vue.set，数据函数）上设置数据属性将运行定义属性来设置反应式 getter 和 setter。

计算属性不使用定义属性。他们在计算时使用依赖关系跟踪系统，以便当他们依赖的事物发生变化时可以重新计算。

您的场景正在发生 b/c v-model 被告知更新对象引用上的 a 值。如果您将 store 设置为严格模式，它实际上会在控制台中发出警告，让您知道您正在对 vuex 之外的 store 进行变异。

var store = new Vuex.Store({
  strict: true,

一个修复，除非您有充分的理由将表单放在商店中（持续重新加载并且您为此使用 vuex），否则我鼓励您在初始化时不要将其放在那里并保存表单数据具有某种功能的形式。

new Vue({
  el: "#app",
  data() {
    return buildFormData(store)
  },

根据我的经验，这有一些好处

您没有使用全局状态系统来跟踪本地组件中的临时数据
您可以独立于真实数据更新表单中的数据。
使用重置或撤消按钮相对容易，因为数据是使用函数创建的，只需重新运行即可
对于刚熟悉 vue 的人来说更容易理解

【讨论】：