vuex search

Vuex Search é um plugin para pesquisar coleções de objetos. Algoritmos de pesquisa desenvolvidos com js-worker-search.

Veja um exemplo de trabalho aqui.

Instalação:

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

Visão geral

vuex-search pesquisa coleções de documentos e retorna resultados como uma Array de IDs de documentos. É importante observar que os próprios documentos não são devolvidos. Isso ocorre porque a pesquisa real é executada em um encadeamento de trabalho da Web por motivos de desempenho. Para evitar serializar os documentos e passá-los de um lado para o outro, o vuex-search simplesmente passa seus ids.

Por isso, cada documento deve conter um atributo id .

Observe que o vuex-search depende do tempo de execução do regenerador, você precisa incluir o plugin transform-runtime em sua configuração do babel,

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

ou adicione babel-polyfill em suas entradas (supondo que você esteja usando o webpack). Por exemplo

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

Exemplos

 // 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' ,
      } ,
    ] ,
  } ,
}

Plug-in de pesquisa Vuex

searchPlugin(options)

• options : Lista de opções para definir o plugin. As opções disponíveis são:

  • resources: { [resourceName]: IndexOptions }

    Dicionário de resourceName e suas opções de índice. Consulte IndexOptions .

  • [searchApi]: SearchApi

    Se fornecido, será usado como searchApi padrão em todos os recursos. Consulte personalização do índice de pesquisa. Padrão: 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 serem indexados.

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

  Função getter para acessar o recurso do estado raiz e observar.

• [watch]: boolean|WatchOptions

  Se é necessário ou atrasar a reindexação se o recurso for alterado. Esta opção é útil para evitar sobrecarga de reindexação quando o recurso muda frequentemente. A reindexação pode ser feita mapeando a ação reindex .

  WatchOptions

  • [delay]: number

    Se fornecido, a reindexação será devolvida com atraso especificado.

  Padrão: true

• [searchApi]: SearchApi

  Índice de pesquisa personalizado. Se definido, ele será usado em vez da instância searchApi compartilhada.

Vinculação com 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)

Semelhante ao auxiliar Vuex para atributos de mapeamento, getterMap pode ser um objeto ou uma matriz.

mapActions(resourceName, actionMap)

Semelhante ao auxiliar Vuex para atributos de mapeamento, actionMap pode ser um objeto ou uma matriz.

getterTypes

• result

  O estado mapeado é uma matriz de IDs.

• isSearching

  O estado mapeado indica se searchApi cumpriu sua promessa de resultado de pesquisa.

• resourceIndex

  Estado completo do índice de recursos: result , isSearching e current search text .

actionTypes

• search

  Assinatura da função da ação mapeada: (query: string) => void .

• reindex

  Assinatura da função da ação mapeada: () => void . Para ser usado quando a opção watch for false . Esta ação reindexará o recurso e pesquisará automaticamente o texto atual.

• registerResource

  Assinatura da função da ação mapeada: (options: IndexOptions) => void . Esta ação adicionará dinamicamente resourceName com as opções fornecidas. Consulte IndexOptions .

  Mais sobre registro de índice dinâmico.

• unregisterResource

  Assinatura da função da ação mapeada: () => void . Esta ação irá desmarcar e remover o índice resourceName .

Personalizando o índice de pesquisa

Por padrão, o vuex-search cria um índice para corresponder a todas as substrings. Você pode substituir esse comportamento fornecendo seu próprio parâmetro searchApi pré-configurado para o plug-in, da seguinte forma:

 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
    } ) ,
  ] ,
} ) ;

Limites de palavras personalizados (tokenização) e distinção entre maiúsculas e minúsculas

Você também pode passar parâmetros para o construtor SearchApi que personalizam a maneira como a pesquisa divide o texto em palavras (tokeniza) e altera a pesquisa do padrão que não diferencia maiúsculas de minúsculas para que diferencia maiúsculas de 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

Quando um módulo precisa ser carregado ou registrado dinamicamente, um plugin definido estaticamente pode ser um problema. A solução é usar o registro de índice dinâmico vuex-search.

A instância VuexSearch pode ser acessada através do atributo search de store . Assim, em uma instância Vue ele é acessado através de this.$store.search . Os métodos disponíveis são:

registerResource(resourceName, options: IndexOptions)

• options: IndexOptions

  Uma lista de opções para indexação de recursos. Consulte IndexOptions .

Observe que este método é um pouco diferente de registerResource de mapActions . Chamar esse método precisa fornecer resourceName . Considerando que o método de mapActions já injetou resourceName como seu primeiro argumento.

unregisterResource(resourceName)

Remova índices de recursos desatualizados e cancele a observação/cancelar a assinatura de quaisquer observadores/assinaturas relacionadas a resourceName .

Mudando de base

Por padrão, o vuex-search registrará seu módulo em 'vuexSearch/' do estado raiz. Para evitar possíveis conflitos de nomenclatura, você pode alterar seu nome base antes de definir o plugin na loja através

 import { VuexSearch } from 'vuex-search' ;

VuexSearch . base = 'vuexSearchNew' ;

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

Registro de alterações

As alterações são rastreadas no changelog.

Licença

vuex-search está disponível sob a licença MIT.