Обработка форм vuex

Question

У меня есть два вычисленных для отображения данных состояния Vuex:

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

Я прочитал некоторые документы о вычисленных.Вычисленные запустят Object.defineProperty (), чтобы создать новое свойство для экземпляра vue.Это означает, что dataTab не имеет отношения к этому. $ Store.state.form или mapA не имеют отношения к state.form.a, верно?,Но когда я использую v-модель для изменения dataTab или mapA, то state.form.a изменится.Почему это случилось?и почему dataTab или mapA не имеют сеттера вычислений, но не показывают ошибку?

Это мой пример кода: https://jsfiddle.net/hoanghung1995/eywraw8t/395022/

Answer 1

Итак, несколько заблуждений.

При установке атрибутов данных для экземпляра vue (Vue.set, функция данных) будет запущено свойство define для настройки реактивных методов получения и установки.

Вычисленные свойства не используют определение свойства.При расчете они используют систему отслеживания зависимостей, чтобы при изменении чего-либо, на что они полагаются, их можно было пересчитать.

Ваш сценарий происходит, поскольку b / c v-модели сказано обновить значение для ссылки на объект.Если вы устанавливаете хранилище в строгий режим, оно на самом деле предупредит в консоли, чтобы вы знали, что вы изменяете хранилище за пределами vuex.

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

Одно исправление, если у вас нет веских причин для того, чтобы ваша форма была в магазине (постоянные перезагрузки и вы используете для этого vuex), я рекомендую вам не помещать ее туда и сохранятьданные формы, когда вы инициализируете форму с помощью какой-либо функции.

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

В моем опыте есть несколько преимуществ

• Вы не используете глобальную систему состояний для отслеживанияэфемерные данные в локальном компоненте
• вы можете обновлять данные в своей форме независимо от реальных данных.
• Кнопки сброса или отмены относительно просты, поскольку данные создаются с помощью функции.просто перезапустите его
• легче грокать людям, которые только что знакомы с vue