Buscar en vuejs con el estado calculado.

Tengo un componente que renderiza datos de una tienda en Vuex.

El componente tiene un estado computado, cuando se haya escrito una consulta de búsqueda, filtrará ese estado de la tienda que es “kommunhanteringItems” para buscar un cliente y aquí tengo un problema, que es que el estado computado mutará el estado de la tienda, lo cual no quiero que suceda.

Estado en la tienda que es “this.$store.state.todos.kommunhanteringItems”:

kommunhanteringItems: [
{
gId: 1,
gtitle: ‘Group1’,
items: [
{cid: 1, customer: ‘Victoria Nils’},
{cid: 2, customer: ‘Mona Andersson’}
]
},
{
gId: 2,
gtitle: ‘Group2’,
items: [
{cid: 3, customer: ‘Jacob Ström’},
{cid: 4, customer: ‘Magdalin eriksson’}
]
}
]

Componente computado:

SearchInTables () {
let k = this.$store.state.todos.kommunhanteringItems
if (this.SearchQuery != ”) {
let SearchFilter = []
let self = this
k.forEach(function (x) {
let items = x.items
let filter = items.filter((item) => {
return item.customer.toUpperCase().includes(self.SearchQuery.toUpperCase())
})
x.items = filter
SearchFilter.push(x)
})
return SearchFilter
} else {
return k
}
}

davy.ai

May 31, 2023 at 11:39 pm

Problema: El estado calculado en el componente está mutando el estado en el almacenamiento Vuex, lo cual no es deseado.

Solución: Para evitar que el estado calculado mute el estado en el almacenamiento, podemos crear una copia del objeto kommunhanteringItems antes de realizar cualquier modificación en él dentro del estado calculado. Esto se puede hacer usando el método deepCopy.

Así es como se verá el componente modificado:

SearchInTables() {
  let k = deepCopy(this.$store.state.todos.kommunhanteringItems); // crea una copia del objeto kommunhanteringItems
  if (this.SearchQuery != '') {
    let SearchFilter = []
    let self = this
    k.forEach(function (x) {
      let items = x.items
      let filter = items.filter((item) => {
        return item.customer.toUpperCase().includes(self.SearchQuery.toUpperCase())
      })
      x.items = filter
      SearchFilter.push(x)
    })
    return SearchFilter
  } else {
    return k
  }
},
methods: {
  deepCopy(obj) {   // función que crea una copia profunda de un objeto
    return JSON.parse(JSON.stringify(obj));
  }
}

El método deepCopy es una función que crea una copia profunda de un objeto. Funciona convirtiendo el objeto en una cadena JSON y luego analizándolo para convertirlo en un objeto de nuevo. Esto crea un nuevo objeto con las mismas propiedades, pero con una ubicación de memoria diferente. Al crear una copia del objeto de estado del almacenamiento, cualquier modificación realizada por el estado calculado solo se realizará en el objeto copiado y no en el estado original en el almacenamiento. De esta manera, podemos evitar la mutación accidental del estado del almacenamiento.

Answer

davy.ai

May 31, 2023 at 11:39 pm
Problema: El estado calculado en el componente está mutando el estado en el almacenamiento Vuex, lo cual no es deseado.

Solución: Para evitar que el estado calculado mute el estado en el almacenamiento, podemos crear una copia del objeto kommunhanteringItems antes de realizar cualquier modificación en él dentro del estado calculado. Esto se puede hacer usando el método deepCopy.

Así es como se verá el componente modificado:
```
SearchInTables() {
  let k = deepCopy(this.$store.state.todos.kommunhanteringItems); // crea una copia del objeto kommunhanteringItems
  if (this.SearchQuery != '') {
    let SearchFilter = []
    let self = this
    k.forEach(function (x) {
      let items = x.items
      let filter = items.filter((item) => {
        return item.customer.toUpperCase().includes(self.SearchQuery.toUpperCase())
      })
      x.items = filter
      SearchFilter.push(x)
    })
    return SearchFilter
  } else {
    return k
  }
},
methods: {
  deepCopy(obj) {   // función que crea una copia profunda de un objeto
    return JSON.parse(JSON.stringify(obj));
  }
}
```
El método deepCopy es una función que crea una copia profunda de un objeto. Funciona convirtiendo el objeto en una cadena JSON y luego analizándolo para convertirlo en un objeto de nuevo. Esto crea un nuevo objeto con las mismas propiedades, pero con una ubicación de memoria diferente. Al crear una copia del objeto de estado del almacenamiento, cualquier modificación realizada por el estado calculado solo se realizará en el objeto copiado y no en el estado original en el almacenamiento. De esta manera, podemos evitar la mutación accidental del estado del almacenamiento.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Buscar en vuejs con el estado calculado.

Answer

davy.ai