vuex search

Vuex Search 是一個用來搜尋物件集合的插件。由 js-worker-search 提供支援的搜尋演算法。

請參閱此處的工作範例。

安裝：

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

概述

vuex-search 搜尋文檔集合並以文檔 id Array的形式傳回結果。值得注意的是，文件本身不會被退回。這是因為出於效能原因，實際搜尋是在網路工作線程中執行的。為了避免序列化文件並來回傳遞它們，vuex-search 只傳遞它們的 id。

因此，每個文件都必須包含一個id屬性。

請注意，vuex-search 依賴 regenerator 運行時，您需要在 babel 配置中包含transform-runtime插件，

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

或在您的條目中新增babel-polyfill （假設您正在使用 webpack）。例如

 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

  映射狀態是一個 id 數組。

• 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動態索引註冊。

可以透過store的search屬性存取VuexSearch實例。因此，在 Vue 實例中，可以透過this.$store.search存取它。可用的方法有：

registerResource(resourceName, options: IndexOptions)

• options: IndexOptions

  用於索引資源的選項清單。請IndexOptions 。

請注意，此方法與mapActions中的registerResource略有不同。呼叫該方法需要提供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 許可證下使用。