Я создал класс Form, в котором я установил несколько методов получения и установки для каждого поля, которое может иметь форма.
В методах получения и установки я пишу и обращаюсь к хранилищу Vuex:
Функция init () - это то, где я настраиваю г / с.
export class Form {
/**
* @param data
*/
constructor(data) {
this.init(data);
this.errors = new Errors();
}
/**
* initially set up the getters/setters properties for the fields
* @param data
*/
init(data) {
for (const propertyData in data) {
if (data.hasOwnProperty(propertyData) && !Form.isPrototypeOf(propertyData)) {
Object.defineProperty(Form.prototype, propertyData, {
get: function () {
return store.state.form[propertyData];
},
set: function (value) {
store.commit('set', {field: propertyData, value: value});
},
});
}
}
}
/**
* set the properties , also setup new setters/getters if new props where added
* @param data
* @returns Object {Form}
*/
fill(data) {
for (let field in data) {
if (data.hasOwnProperty(field)) {
this[field] = data[field];
}
}
return this;
}
reset() {
store.commit('reset');
return this;
}
data() {
return store.state.form;
}
}
Это работает просто замечательно, когда у меня есть вход и, например, bind form.name
это написано в Vue Storge.
и когда я делаю console.log в этом форме, он показывает изменения
...
methods: {
test() {
console.log(this.form.name);
},
...
Что я заметил, и это на самом деле моя проблема и вопрос.
когда я делаю {{form.name}} под вводом, например, это не обновляется, как должно, и я не уверен почему?
EDIT:
после обратной связи от @Jacob Goh и некоторого хакерства с моей проблемой кажется, что я нашел решение:
init(data) {
for (let propertyData in data) {
this[propertyData + '_i'] = data[propertyData];
if (data.hasOwnProperty(propertyData) && !Form.prototype.hasOwnProperty(propertyData)) {
Object.defineProperty(Form.prototype, propertyData, {
get: function () {
this[propertyData + '_i'] = store.state.form[propertyData];
return this[propertyData + '_i'];
},
set: function (value) {
this[propertyData + '_i'] = value;
store.commit('set', {field: propertyData, value: value});
},
});
}
}
}
переменная в vue, а также в журнале консоли, похоже, обновляется правильно.
Я не уверен, что происходит.
Полагаю, я бы добавил новые свойства к объекту с помощью _i, поэтому думаю, что ему нужно настроить группу новых наблюдателей.
Надеюсь, кто-нибудь мог прояснить это.