vuex search
v2.1
Vuex Search est un plugin permettant de rechercher des collections d'objets. Algorithmes de recherche alimentés par js-worker-search.
npm install --save vuex-search
# or
yarn add vuex-search vuex-search recherche des collections de documents et renvoie les résultats sous forme de Array d'identifiants de documents. Il est important de noter que les documents eux-mêmes ne sont pas restitués. En effet, la recherche réelle est effectuée dans un thread de travail Web pour des raisons de performances. Afin d'éviter de sérialiser les documents et de les transmettre, vuex-search transmet simplement leurs identifiants.
Pour cette raison, chaque document doit contenir un attribut id .
Veuillez noter que vuex-search dépend du runtime du régénérateur, vous devez soit inclure le plugin transform-runtime dans votre configuration babel,
{
"plugins" : [
" transform-runtime "
]
} ou ajoutez babel-polyfill dans vos entrées (en supposant que vous utilisez webpack). Par exemple
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' ,
} ,
] ,
} ,
}searchPlugin(options) options : Liste des options pour définir le plugin. Les options disponibles sont :
resources: { [resourceName]: IndexOptions }
Dictionnaire de resourceName et de leurs options d'index. Voir IndexOptions .
[searchApi]: SearchApi
S'il est fourni, il sera utilisé comme API de recherche par défaut dans toutes les ressources. Voir personnalisation de l'index de recherche. Par défaut : 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>
Liste des champs à indexer.
getter: (state) => Array<object>|object
Fonction Getter pour accéder à la ressource à partir de l’état racine et la regarder.
[watch]: boolean|WatchOptions
S'il faut ou retarder la réindexation si la ressource change. Cette option est utile pour éviter la surcharge de réindexation lorsque la ressource change fréquemment. La réindexation peut être effectuée en mappant l'action reindex .
WatchOptions
[delay]: number
Si elle est fournie, la réindexation sera anti-rebond avec un délai spécifié.
Par défaut : true
[searchApi]: SearchApi
Index de recherche personnalisé. S’il est défini, il est utilisé à la place de l’instance searchApi partagée.
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) Semblable à l'assistant Vuex pour le mappage des attributs, getterMap peut être soit un objet, soit un tableau.
mapActions(resourceName, actionMap) Semblable à l'assistant Vuex pour le mappage des attributs, actionMap peut être soit un objet, soit un tableau.
getterTypes result
L'état mappé est un tableau d'identifiants.
isSearching
L’état mappé indique si searchApi a tenu sa promesse de résultat de recherche.
resourceIndex
État complet de l’index des ressources : result , isSearching et text de recherche actuel .
actionTypes search
Signature de fonction de l'action mappée : (query: string) => void .
reindex
Signature de fonction de l'action mappée : () => void . À utiliser lorsque l'option watch est false . Cette action réindexera la ressource et recherchera automatiquement le texte actuel.
registerResource
Signature de fonction de l'action mappée : (options: IndexOptions) => void . Cette action ajoutera dynamiquement resourceName avec les options fournies. Voir IndexOptions .
En savoir plus sur l'enregistrement d'index dynamique.
unregisterResource
Signature de fonction de l'action mappée : () => void . Cette action annulera la surveillance et supprimera l'index resourceName .
Par défaut, vuex-search crée un index pour correspondre à toutes les sous-chaînes. Vous pouvez remplacer ce comportement en fournissant votre propre paramètre searchApi préconfiguré au plugin comme ceci :
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
} ) ,
] ,
} ) ;Vous pouvez également transmettre des paramètres au constructeur SearchApi qui personnalisent la façon dont la recherche divise le texte en mots (tokenizes) et modifier la recherche de la recherche par défaut insensible à la casse en sensible à la casse :
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 ,
} ) ,
} ) ,
] ,
} ) ;Lorsqu'un module doit être chargé ou enregistré dynamiquement, un plugin défini statiquement peut poser problème. La solution consiste à utiliser l'enregistrement d'index dynamique vuex-search.
L'instance VuexSearch est accessible via l'attribut search du store . Ainsi, dans une instance Vue, il est accessible via this.$store.search . Les méthodes disponibles sont :
registerResource(resourceName, options: IndexOptions) options: IndexOptions
Une liste d’options pour l’indexation des ressources. Voir IndexOptions .
Notez que cette méthode est légèrement différente de registerResource de mapActions . L’appel de cette méthode doit fournir resourceName . Alors que la méthode de mapActions a déjà injecté resourceName comme premier argument.
unregisterResource(resourceName) Supprimez les index de ressources obsolètes et désabonnez/désabonnez tous les observateurs/abonnements liés à resourceName .
Par défaut, vuex-search enregistrera son module dans 'vuexSearch/' à partir de l'état racine. Pour éviter d'éventuels conflits de dénomination, vous pouvez modifier son nom de base avant de définir le plugin dans le magasin via
import { VuexSearch } from 'vuex-search' ;
VuexSearch . base = 'vuexSearchNew' ;
const store = new Vuex . Store ( {
// ... store options
} ) ; Les modifications sont suivies dans le journal des modifications.
vuex-search est disponible sous la licence MIT.
