vuex search

Vuex Search adalah plugin untuk mencari koleksi objek. Algoritme pencarian didukung oleh js-worker-search.

Lihat contoh kerja di sini.

Instalasi:

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

Ringkasan

vuex-search mencari koleksi dokumen dan mengembalikan hasil sebagai Array id dokumen. Penting untuk dicatat bahwa dokumen itu sendiri tidak dikembalikan. Hal ini karena pencarian sebenarnya dilakukan di thread pekerja web untuk alasan kinerja. Untuk menghindari pembuatan serial dokumen dan meneruskannya bolak-balik, vuex-search hanya meneruskan idnya.

Oleh karena itu, setiap dokumen harus berisi atribut id .

Harap dicatat bahwa vuex-search bergantung pada runtime regenerator, Anda perlu menyertakan plugin transform-runtime di konfigurasi babel Anda,

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

atau tambahkan babel-polyfill di entri Anda (dengan asumsi Anda menggunakan webpack). Misalnya

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

Contoh

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

Plugin Pencarian Vuex

searchPlugin(options)

• options : Daftar opsi untuk mendefinisikan plugin. Opsi yang tersedia adalah:

  • resources: { [resourceName]: IndexOptions }

    Kamus resourceName dan opsi indeksnya. Lihat IndexOptions .

  • [searchApi]: SearchApi

    Jika disediakan, ini akan digunakan sebagai api pencarian default di seluruh sumber daya. Lihat menyesuaikan indeks pencarian. Bawaan: 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>

  Daftar bidang yang akan diindeks.

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

  Fungsi pengambil untuk mengakses sumber daya dari status root dan untuk menonton.

• [watch]: boolean|WatchOptions

  Apakah perlu atau menunda pengindeksan ulang jika sumber daya berubah. Opsi ini berguna untuk menghindari pengindeksan ulang overhead ketika sumber daya sering berubah. Pengindeksan ulang dapat dilakukan dengan memetakan tindakan reindex .

  WatchOptions

  • [delay]: number

    Jika disediakan, pengindeksan ulang akan dibatalkan dengan penundaan yang ditentukan.

  Bawaan: true

• [searchApi]: SearchApi

  Indeks pencarian khusus. Jika ditentukan, ini digunakan sebagai pengganti instance searchApi bersama.

Mengikat dengan Komponen 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)

Mirip dengan Vuex helper untuk memetakan atribut, getterMap dapat berupa objek atau array.

mapActions(resourceName, actionMap)

Mirip dengan Vuex helper untuk memetakan atribut, actionMap dapat berupa objek atau array.

getterTypes

• result

  Status yang dipetakan adalah serangkaian id.

• isSearching

  Status yang dipetakan menunjukkan apakah searchApi telah memenuhi janji hasil pencariannya.

• resourceIndex

  Status lengkap indeks sumber daya: result , isSearching , dan current search text .

actionTypes

• search

  Tanda tangan fungsi tindakan yang dipetakan: (query: string) => void .

• reindex

  Tanda tangan fungsi tindakan yang dipetakan: () => void . Untuk digunakan ketika watch opsi false . Tindakan ini akan mengindeks ulang sumber daya dan secara otomatis mencari ulang teks saat ini.

• registerResource

  Tanda tangan fungsi tindakan yang dipetakan: (options: IndexOptions) => void . Tindakan ini akan menambahkan resourceName secara dinamis dengan opsi yang disediakan. Lihat IndexOptions .

  Lebih lanjut tentang Registrasi Indeks Dinamis.

• unregisterResource

  Tanda tangan fungsi tindakan yang dipetakan: () => void . Tindakan ini akan membatalkan pengawasan dan menghapus indeks resourceName .

Menyesuaikan Indeks Pencarian

Secara default, vuex-search membuat indeks untuk mencocokkan semua substring. Anda dapat mengganti perilaku ini dengan menyediakan parameter searchApi Anda sendiri yang telah dikonfigurasi sebelumnya ke plugin seperti:

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

Batasan kata khusus (tokenisasi) dan sensitivitas huruf besar-kecil

Anda juga dapat meneruskan parameter ke konstruktor SearchApi yang menyesuaikan cara pencarian membagi teks menjadi kata-kata (tokenisasi) dan mengubah pencarian dari default peka huruf besar-kecil menjadi peka huruf besar-kecil:

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

Registrasi Indeks Dinamis

Ketika sebuah modul perlu dimuat atau didaftarkan secara dinamis, plugin yang ditentukan secara statis dapat menjadi masalah. Solusinya adalah dengan menggunakan registrasi indeks dinamis vuex-search.

Contoh VuexSearch dapat diakses melalui atribut search store . Jadi, dalam instance Vue, ini diakses melalui this.$store.search . Metode yang tersedia adalah:

registerResource(resourceName, options: IndexOptions)

• options: IndexOptions

  Daftar opsi untuk mengindeks sumber daya. Lihat IndexOptions .

Perhatikan bahwa metode ini sedikit berbeda dari registerResource dari mapActions . Memanggil metode ini perlu menyediakan resourceName . Padahal, metode dari mapActions telah memasukkan resourceName sebagai argumen pertamanya.

unregisterResource(resourceName)

Hapus indeks sumber daya yang sudah ketinggalan zaman, dan batalkan tontonan/berhenti berlangganan pengamat/langganan apa pun yang terkait dengan resourceName .

Mengubah Basis

Secara default, vuex-search akan mendaftarkan modulnya di 'vuexSearch/' dari status root. Untuk menghindari kemungkinan bentrokan penamaan, Anda dapat mengubah nama dasarnya sebelum mendefinisikan plugin di toko

 import { VuexSearch } from 'vuex-search' ;

VuexSearch . base = 'vuexSearchNew' ;

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

log perubahan

Perubahan dilacak di changelog.

Lisensi

vuex-search tersedia di bawah Lisensi MIT.