时间戳

首页 > 解决方案 > vuex的表单处理

vue.js - vuex的表单处理

问题描述

我有两个计算来显示 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.jsvuejs2vuex

解决方案

所以有一些误解。

在 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)
  },

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

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

推荐阅读