Будет ли vuex работать правильно с общими мутациями, которые не ссылаются на `state`?

Question

Я использую vuex с деревом данных.Он реактивен и работает хорошо, потому что у нас есть соответствующее дерево компонентов.Поскольку структура представляет собой дерево, обычно требуется мутировать глубоко вложенный дочерний объект.Простой способ реализовать это с помощью мутации, которая принимает дочерний элемент в его полезной нагрузке:

removeLeaf(state, { child, leaf }) {
  child.children = child.children.filter((i: any) => i !== leaf);
  state = state; // silence warning
},

Другой способ - изменить мутацию так, чтобы она работала так:

removeLeaf(state, { child_, leaf }) {
  let child = searchForChild(state, child_);
  child.children = child.children.filter((i: any) => i !== leaf);
},

Я доволен первым способом.Есть ли какие-либо недостатки в написании мутаций, которые изменяют дочерний объект состояния, используя полезную нагрузку вместо параметра состояния?

Answer 1

Я не думаю, что это будет работать должным образом.

Система реактивности Vue и Vuex основана на Javascript Getter и Setter .

Если вы утешите state в любой мутации, вы увидите что-то вроде этого:

get и set - получатель и установщик ваших состояний Vuex.

Без сеттера система реактивности Vue, скорее всего, не сработает.

Попробуйте console.log state и child в вашей мутации. Скорее всего, вы увидите, что child не содержит сеттера .

Если сеттера нет, Вью не узнает, что вы обновили состояние child, и у вас, скорее всего, будет проблема с реактивностью.