vuex search

Vuex Search es un complemento para buscar colecciones de objetos. Algoritmos de búsqueda impulsados ​​por js-worker-search.

Vea el ejemplo de trabajo aquí.

Instalación:

npm install --save vuex-search
# or
yarn add vuex-search

Descripción general

vuex-search busca colecciones de documentos y devuelve resultados como una Array de identificadores de documentos. Es importante tener en cuenta que los documentos en sí no se devuelven. Esto se debe a que la búsqueda real se realiza en un hilo de trabajo web por motivos de rendimiento. Para evitar serializar los documentos y pasarlos de un lado a otro, vuex-search simplemente pasa sus identificaciones.

Por esta razón, cada documento debe contener un atributo id .

Tenga en cuenta que vuex-search depende del tiempo de ejecución del regenerador, debe incluir el complemento transform-runtime en su configuración de babel,

{
  "plugins" : [
    " transform-runtime "
  ]
}

o agregue babel-polyfill en sus entradas (suponiendo que esté usando webpack). Por ejemplo

 module . export = {
  entries : [ 'babel-polyfill' , './src' ]
} 

Ejemplos

 // store/state.js

export default {
  myResources : {
    contacts : [
      {
        // id is required for each record
        id : '1' ,
        address : '1 Hacker Way, Menlo Park' ,
        name : 'Dr. Katrina Stehr' ,
      } ,
      {
        id : '2' ,
        address : '06176 Georgiana Points' ,
        name : 'Edyth Grimes' ,
      } ,
    ] ,
  } ,
}

Complemento de búsqueda Vuex

searchPlugin(options)

• options : Lista de opciones para definir el complemento. Las opciones disponibles son:

  • resources: { [resourceName]: IndexOptions }

    Diccionario de resourceName y sus opciones de índice. Consulte IndexOptions .

  • [searchApi]: SearchApi

    Si se proporciona, se utilizará como SearchApi predeterminada en todos los recursos. Ver personalización del índice de búsqueda. Valor predeterminado: new SearchApi()

 // store/index.js

import Vue from 'vue' ;
import Vuex from 'vuex' ;
import searchPlugin from 'vuex-search' ;
import state from './state' ;

Vue . use ( Vuex ) ;

const store = new Vuex . Store ( {
  state ,
  plugins : [
    searchPlugin ( {
      resources : {
        contacts : {
          // what fields to index
          index : [ 'address' , 'name' ] ,
          // access the state to be watched by Vuex Search
          getter : state => state . myResources . contacts ,
          // how resource should be watched
          watch : { delay : 500 } ,
        } ,
        // otherResource: { index, getter, watch, searchApi },
      } ,
    } ) ,
  ] ,
} ) ; 

IndexOptions

• index: Array<string>

  Lista de campos a indexar.

• getter: (state) => Array<object>|object

  Función getter para acceder al recurso desde el estado raíz y observarlo.

• [watch]: boolean|WatchOptions

  Si es necesario o retrasar la reindexación si el recurso cambia. Esta opción es útil para evitar la sobrecarga de reindexación cuando el recurso cambia con frecuencia. La reindexación se puede realizar mapeando la acción reindex .

  WatchOptions

  • [delay]: number

    Si se proporciona, la reindexación será rechazada con el retraso especificado.

  Predeterminado: true

• [searchApi]: SearchApi

  Índice de búsqueda personalizado. Si se define, se utiliza en lugar de la instancia compartida searchApi .

Vinculación con el componente Vue

 import {
  mapActions as mapSearchActions ,
  mapGetters as mapSearchGetters ,
  getterTypes ,
  actionTypes ,
} from 'vuex-search' ; 

 // SomeComponent.vue

data ( ) {
  return { text : '' } ,
} ,

computed : {
  ... mapSearchGetters ( 'contacts' , {
    resultIds : getterTypes . result ,
    isLoading : getterTypes . isSearching ,
  } ) ,
} ,

methods : {
  ... mapSearchActions ( 'contacts' , {
    searchContacts : actionTypes . search ,
  } ) ,
  doSearch ( ) {
    this . searchContacts ( this . text ) ;
  } ,
} , 

mapGetters(resourceName, getterMap)

Similar al asistente de Vuex para mapear atributos, getterMap puede ser un objeto o una matriz.

mapActions(resourceName, actionMap)

Similar al asistente de Vuex para mapear atributos, actionMap puede ser un objeto o una matriz.

getterTypes

• result

  El estado mapeado es una matriz de identificadores.

• isSearching

  El estado asignado indica si searchApi ha resuelto su promesa de resultado de búsqueda.

• resourceIndex

  Estado completo del índice de recursos: result , isSearching y text de búsqueda actual.

actionTypes

• search

  Firma de la función de la acción asignada: (query: string) => void .

• reindex

  Firma de la función de la acción asignada: () => void . Se utiliza cuando la opción de watch es false . Esta acción volverá a indexar el recurso y volverá a buscar automáticamente el texto actual.

• registerResource

  Firma de la función de la acción asignada: (options: IndexOptions) => void . Esta acción agregará dinámicamente resourceName con las opciones proporcionadas. Consulte IndexOptions .

  Más información sobre el registro de índice dinámico.

• unregisterResource

  Firma de la función de la acción asignada: () => void . Esta acción dejará de observar y eliminará el índice resourceName .

Personalización del índice de búsqueda

De forma predeterminada, vuex-search crea un índice para que coincida con todas las subcadenas. Puede anular este comportamiento proporcionando su propio parámetro searchApi preconfigurado al complemento de la siguiente manera:

 import searchPlugin , { SearchApi , INDEX_MODES } from 'vuex-search' ;

// all-substrings match by default; same as current
// eg 'c', 'ca', 'a', 'at', 'cat' match 'cat'
const allSubstringsSearchApi = new SearchApi ( ) ;

// prefix matching (eg 'c', 'ca', 'cat' match 'cat')
const prefixSearchApi = new SearchApi ( {
  indexMode : INDEX_MODES . PREFIXES ,
} ) ;

// exact words matching (eg only 'cat' matches 'cat')
const exactWordsSearchApi = new SearchApi ( {
  indexMode : INDEX_MODES . EXACT_WORDS ,
} ) ;

const store = new Vuex . Store ( {
  state ,
  plugins : [
    searchPlugin ( {
      resources : {
        contacts : {
          index : [ 'address' , 'name' ] ,
          getter : state => state . myResources . contacts ,
        } ,
      } ,
      searchApi : exactWordsSearchApi , // or allSubstringSearchApi; or prefixSearchApi
    } ) ,
  ] ,
} ) ;

Límites de palabras personalizados (tokenización) y distinción entre mayúsculas y minúsculas

También puede pasar parámetros al constructor SearchApi que personaliza la forma en que la búsqueda divide el texto en palabras (tokeniza) y cambia la búsqueda de la opción predeterminada que no distingue entre mayúsculas y minúsculas a que distingue entre mayúsculas y minúsculas:

 import searchPlugin , { SearchApi } from 'vuex-search' ;

const store = new Vuex . Store ( {
  state ,
  plugins : [
    searchPlugin ( {
      resources : {
        contacts : {
          index : [ 'address' , 'name' ] ,
          getter : state => state . myResources . contacts ,
        } ,
      } ,
      searchApi : new SearchApi ( {
        // split on all non-alphanumeric characters,
        // so this/that gets split to ['this','that'], for example
        tokenizePattern : / [^a-z0-9]+ / ,
        // make the search case-sensitive
        caseSensitive : true ,
      } ) ,
    } ) ,
  ] ,
} ) ;

Registro de índice dinámico

Cuando un módulo necesita cargarse o registrarse dinámicamente, el complemento definido estáticamente puede ser un problema. La solución es utilizar el registro de índice dinámico de vuex-search.

Se puede acceder a la instancia VuexSearch a través del atributo search de store . Por lo tanto, en una instancia de Vue se accede a través de this.$store.search . Los métodos disponibles son:

registerResource(resourceName, options: IndexOptions)

• options: IndexOptions

  Una lista de opciones para indexar recursos. Consulte IndexOptions .

Tenga en cuenta que este método es ligeramente diferente de registerResource de mapActions . Llamar a este método debe proporcionar resourceName . Mientras que el método de mapActions ya ha inyectado resourceName como primer argumento.

unregisterResource(resourceName)

Elimine los índices de recursos obsoletos y cancele la supervisión/cancelación de suscripción de observadores/suscripciones relacionados con resourceName .

Base cambiante

De forma predeterminada, vuex-search registrará su módulo en 'vuexSearch/' desde el estado raíz. Para evitar posibles conflictos de nombres, puede cambiar su nombre base antes de definir el complemento en la tienda a través de

 import { VuexSearch } from 'vuex-search' ;

VuexSearch . base = 'vuexSearchNew' ;

const store = new Vuex . Store ( {
  // ... store options
} ) ; 

Registro de cambios

Los cambios se rastrean en el registro de cambios.

Licencia

vuex-search está disponible bajo la licencia MIT.