M
M
masimka2018-05-14 20:05:58
Vue.js
masimka, 2018-05-14 20:05:58

Why does the vuex state array of objects in the state store increase by one array element instead of being overwritten?

I accept json from the server. in the b-table component (bootstrap-vue), which renders the elements as rows from the items
array Instead of overwriting the array with root objects in storage every time, it adds it as another array element with nested objects, and another, and another .. and more .. and so on. every time you switch.
It is necessary that it be
<b>items</b>[{one}, {two}, {three}]
And he, under all equal conditions, does

<b>items</b>[
[{one}, {two}, {three}],
[{one}, {two}, {three}],
[{one}, {two}, {three}]
]

Previously, I did exactly the same, earlier objects got into the array and were overwritten each time, and now for some reason, with each transition, a new element appears in the array with objects inside and b-table does not see it. Although in mutations it is reassigned. Where to look, where to dig?
There is a table
<b-table striped="striped" bordered="bordered" responsive="sm"
                 :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">

When loading a component, I execute action fetchSysTax :
mounted() {
      this.$store.dispatch('settings/fetchSysTax');
    },

Next, I already get items from the state store:
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);  <-- и так тоже самое
    // }); 
  },

The following data comes from the server
[{"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}]

Storage State:
export default {
  systaxs: [],
  };

At the output, I get that instead of replacing the entire array, the next element with nested objects is added to the systaxs storage, and b-table does not see it, since they are not root. In a mutation, I do not push it (push), but simply assign it.
Therefore, data is not assigned correctly through computed.
If done
mounted() {
      this.$store.dispatch('settings/fetchSysTax')
        .then((value) => {
          this.items = value.data;
        });
    }

Then it works correctly and the data in the table is displayed as rows, but the systaxs storage data is still added, not replaced.
Previously, I did the same, everything worked, through computed, which worked as soon as the data appeared in systaxs, and showed me the correct array in which each element was a root object.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
masimka, 2018-05-15
@masimka

made a mistake, my mistake, in mutation-types.js in one place the mutation alias was in two places

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question