Можно ли сделать vuex store уникальным для каждого компонента?

Question

[webivan1]

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

@foreach ($item in $items)
    <mortgage-list
           :sum="{{ $item->sum }}"
           :min-fee="{{ $item->fee }}"
           :key="{{ $item->id }}"
     ></mortgage-list>
@endforeach

Теперь этот компонент хотят выводить в цикле, то есть их будет много на странице.
Я реализовал такое, но теперь изменяя что-то в одном компоненте, меняется во всех.
Понял что store предназначен для spa, но я делаю некоторые задачи на vue, получаются как модули и в некоторых использую vuex, как теперь быть с этим компонентом? Может как-то есть способ сообщить vuex чтобы он распространял своё влияние только на 1 компонент или все переделывать на локальный state?

Answer 1

[0xD34F]

изменяя что-то в одном компоненте, меняется во всех

Вам следует изменить структуру данных в хранилище - так, чтобы можно было держать там данные сразу для нескольких экземпляров mortgage-list. Сделайте объект, ключами будут id (те, что вы используете в качестве key - они ведь уникальные, правда же?). Ну а значениями - объекты с данными для отдельного экземпляра. В сам компоненте mortgage-list надо добавить вычисляемое свойство, где по id из хранилища будет извлекаться нужный объект.

Comments

[webivan1]

Спасибо, все же решил перевести на локальный стейт

Answer 2

[Кирилл Романов]

А почему бы просто не перенести хранение состояния в сам компонент?

Comments

[webivan1]

Ну делать локальный state уже лениво, после реализации на vuex.
Это конечно решение, но перекидывать пропсы и евенты не хочется, вдруг есть какой параметр у Vuex, который я упустил

Answer 3

[Александр Аксентьев]

Или извращаться как-то так https://codeburst.io/dynamic-modules-with-vuex-and...

Или делать нормально с привязкой к какому-то ключу в компоненте, а то как вы сделали-то общий стейт с одним ключом на всех?

Comments

[webivan1]

Предполагалось что компонент будет 1, а вышло как всегда )