[Vuejs]-VueX Getter acting reactively – how to assign non-reactive to variable?

0πŸ‘

The getter $store.getters['filters/getActiveFilters'] will return same(cached) result(reference to array) if there is no changes in state.filters. So when you push some element you push it to the cached filtered array that is referenced in other parts of app.
Just copy array with slice to avoid changing cached value:

const activeFilters = this.$store.getters['filters/getActiveFilters'].slice();

P.S. This is just shallow copy, so if you want to change some item property – use mutations.

0πŸ‘

You can use this approach to the problem:

const activeFilters = [...this.$store.getters['filters/getActiveFilters']]

This method create copy of array and this copy is not associated with vuex objects.
For save changed values, you must use mutations.
God luck.

Leave a comment