Задать вопрос
@masimka

Почему vuex state массив объектов в харанилище состояния увеличивается на один елемент массива вместо перезаписи?

Принимаю json c сервера. в Компонетнт b-table (bootstrap-vue), который отображает элементы как строки из массива items
Вместо того чтобы в хранилище массив с корневыми объектами перезаписывался каждый раз, он его добавляет как еще один елемент массива с вложенными обектами, и ещё один, и ещё.. и ещё.. и так далее. каждый раз при переходе.
Нужно чтобы было
<b>items</b>[{one}, {two}, {three}]
А он при все равных условиях делает
<b>items</b>[
[{one}, {two}, {three}],
[{one}, {two}, {three}],
[{one}, {two}, {three}]
]

Ранее, делал точно так же, ранее в массив попадали обекты и каждый раз перезаписывались, а теперь почему то при каждом переходе в массиве появляется новый елемент с обектами внутри и b-table его не видит. Хотя в мутациях он переприсваивается. Куда что смотреть, куда копать?
Есть таблица
<b-table striped="striped" bordered="bordered" responsive="sm"
                 :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">

При загрузке компонента выполняю action fetchSysTax:
mounted() {
      this.$store.dispatch('settings/fetchSysTax');
    },

Далее уже items получаю из хранилища состояния:
computed: {
      items: {
       get() {
          return this.$store.state.settings.systaxs;
        },
      },
    },


Action --> fetchSysTax
export const fetchSysTax = ({ commit }) => new Promise((resolve, reject) => {
  Vue.$http.get('/taxs').then((response) => {
    commit(types.FETCH_SYSTAX, response.data);
    resolve(response);
  }, (err) => {
    reject(err);
  });
});


Mutation FETCH_SYSTAX
[FETCH_SYSTAX](state, fetchSysTax) {
    state.systaxs = fetchSysTax; <-- данные ввиде json
    // Vue.set(state.systaxs, fetchSysTax); <-- так тоже самое
    // fetchSysTax.forEach((itm) => {  <-- и так тоже самое
    //   state.systaxs.push(itm);  <-- и так тоже самое
    // }); 
  },


С сервера приходит такие данные
[{"id":1,"name":"asdasd","title":"stand2","perc":34},{"id":2,"name":"213123","title":"213123","perc":1231},{"id":3,"name":"asdasd","title":"asdasd","perc":1011},{"id":4,"name":"qwe","title":"qwe","perc":11},{"id":6,"name":"werwer","title":"werwer","perc":23}]


Хранилище State:
export default {
  systaxs: [],
  };


На выходе получаю, что в хранилище systaxs вместо замены всего массива, добавляется следующий элемет с вложенными обектами и b-table его не видит, так как они не корневые. В мутации, я его не пушу (push) а просто присваиваю.

По этому через computed данныек присваиваются не корректно.
Если сделать
mounted() {
      this.$store.dispatch('settings/fetchSysTax')
        .then((value) => {
          this.items = value.data;
        });
    }


Тогда работает корректно и отображаются данные в таблице ввиде строк, но при этом данные хранилище systaxs все равно доблавляются, а не заменяются.

Ранее так же делал, все работала, через computed, который срабатывал как только данные появлялись в systaxs, и отображал мне корректный массив в котором каждый элемент был корневым обьектом.
  • Вопрос задан
  • 852 просмотра
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 1
@masimka Автор вопроса
допустил ошибку, моя ошибка, в mutation-types.js в одном месте псевдоним мутации был в двух местах
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы