vuex search

Vuex Search — плагин для поиска коллекций объектов. Алгоритмы поиска на основе js-worker-search.

См. рабочий пример здесь.

Установка:

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

Обзор

vuex-search ищет коллекции документов и возвращает результаты в виде Array идентификаторов документов. Важно отметить, что сами документы не возвращаются. Это связано с тем, что фактический поиск выполняется в потоке веб-рабочего из соображений производительности. Чтобы избежать сериализации документов и их передачи туда и обратно, vuex-search просто передает их идентификаторы.

По этой причине каждый документ должен содержать атрибут id .

Обратите внимание, что поиск vuex зависит от времени выполнения регенератора, вам необходимо либо включить плагин transform-runtime в конфигурацию Babel, либо

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

или добавьте в свои записи babel-polyfill (при условии, что вы используете веб-пакет). Например

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

Примеры

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

Плагин поиска Vuex

searchPlugin(options)

• options : список опций для определения плагина. Доступные варианты:

  • resources: { [resourceName]: IndexOptions }

    Словарь resourceName и их параметры индекса. См. IndexOptions .

  • [searchApi]: SearchApi

    Если он предоставлен, он будет использоваться в качестве searchApi по умолчанию для всех ресурсов. См. настройку индекса поиска. По умолчанию: 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>

  Список полей для индексации.

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

  Функция Getter для доступа к ресурсу из корневого состояния и просмотра.

• [watch]: boolean|WatchOptions

  Нужно ли переиндексировать или отложить переиндексацию в случае изменения ресурса. Эта опция полезна, чтобы избежать накладных расходов на переиндексацию, когда ресурс часто меняется. Переиндексацию можно выполнить путем сопоставления действия reindex .

  WatchOptions

  • [delay]: number

    Если это предусмотрено, переиндексация будет отменена с указанной задержкой.

  По умолчанию: true

• [searchApi]: SearchApi

  Индекс пользовательского поиска. Если он определен, он используется вместо общего экземпляра searchApi .

Связывание с компонентом 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)

Подобно помощнику Vuex для сопоставления атрибутов, getterMap может быть либо объектом, либо массивом.

mapActions(resourceName, actionMap)

Подобно помощнику Vuex для сопоставления атрибутов, actionMap может быть либо объектом, либо массивом.

getterTypes

• result

  Сопоставленное состояние представляет собой массив идентификаторов.

• isSearching

  Сопоставленное состояние указывает, выполнил ли searchApi свое обещание о результатах поиска.

• resourceIndex

  Полное состояние индекса ресурса: result , isSearching и текущий text поиска.

actionTypes

• search

  Сигнатура функции сопоставленного действия: (query: string) => void .

• reindex

  Сигнатура функции сопоставленного действия: () => void . Используется, когда опция watch имеет значение false . Это действие переиндексирует ресурс и автоматически повторит поиск текущего текста.

• registerResource

  Сигнатура функции сопоставленного действия: (options: IndexOptions) => void . Это действие будет динамически добавлять resourceName с предоставленными параметрами. См. IndexOptions .

  Подробнее о регистрации динамического индекса.

• unregisterResource

  Сигнатура функции сопоставленного действия: () => void . Это действие приведет к отмене отслеживания и удалению индекса resourceName .

Настройка индекса поиска

По умолчанию vuex-search создает индекс для соответствия всем подстрокам. Вы можете переопределить это поведение, указав свой собственный, предварительно настроенный параметр searchApi для плагина, например:

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

Пользовательские границы слов (токенизация) и чувствительность к регистру

Вы также можете передать параметры конструктору SearchApi, которые настраивают способ разделения текста на слова (токенизацию) при поиске и изменяют поиск с регистронезависимого по умолчанию на регистрозависимый:

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

Регистрация динамического индекса

Когда модуль необходимо загружать или регистрировать динамически, статически определенный плагин может стать проблемой. Решение — использовать регистрацию динамического индекса vuex-search.

Доступ к экземпляру VuexSearch можно получить через атрибут search store . Таким образом, в экземпляре Vue доступ к нему осуществляется через this.$store.search . Доступные методы:

registerResource(resourceName, options: IndexOptions)

• options: IndexOptions

  Список вариантов индексации ресурса. См. IndexOptions .

Обратите внимание, что этот метод немного отличается от registerResource из mapActions . Для вызова этого метода необходимо предоставить resourceName . Принимая во внимание, что метод из mapActions уже ввел resourceName в качестве своего первого аргумента.

unregisterResource(resourceName)

Удалите устаревшие индексы ресурсов и отмените отслеживание или отмену подписки всех наблюдателей/подписок, связанных с resourceName .

Изменение базы

По умолчанию vuex-search регистрирует свой модуль в 'vuexSearch/' из корневого состояния. Чтобы избежать возможного конфликта имен, вы можете изменить его базовое имя перед определением плагина в магазине через

 import { VuexSearch } from 'vuex-search' ;

VuexSearch . base = 'vuexSearchNew' ;

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

Журнал изменений

Изменения отслеживаются в журнале изменений.

Лицензия

vuex-search доступен по лицензии MIT.