vuex search
v2.1
Vuex Search は、オブジェクトのコレクションを検索するためのプラグインです。 js-worker-search を利用した検索アルゴリズム。
npm install --save vuex-search
# or
yarn add vuex-searchvuex-search はドキュメントのコレクションを検索し、結果をドキュメント ID のArrayとして返します。書類そのものは返却されないので注意が必要です。これは、パフォーマンス上の理由から、実際の検索は Web ワーカー スレッドで実行されるためです。ドキュメントをシリアル化してやり取りすることを避けるために、vuex-search は単にその ID を渡します。
このため、各ドキュメントにはid属性が含まれている必要があります。
vuex-search はリジェネレーター ランタイムに依存することに注意してください。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' ,
} ,
] ,
} ,
}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
ルート状態からリソースにアクセスして監視するためのゲッター関数。
[watch]: boolean|WatchOptions
リソースが変更された場合にインデックスの再作成が必要かどうか、または再インデックスを遅らせる必要があるかどうか。このオプションは、リソースが頻繁に変更される場合の再インデックスのオーバーヘッドを回避するのに役立ちます。インデックスの再作成は、マッピング アクションreindexによって実行できます。
WatchOptions
[delay]: number
指定した場合、再インデックスは指定された遅延でデバウンスされます。
デフォルト: true
[searchApi]: SearchApi
カスタム検索インデックス。定義されている場合、共有searchApiインスタンスの代わりに使用されます。
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 の動的インデックス登録を使用することです。
VuexSearchインスタンスには、 storeのsearch属性を通じてアクセスできます。したがって、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 ライセンスの下で利用できます。
