vuex search
v2.1
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는 재생성기 런타임에 따라 달라지므로 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
루트 상태에서 리소스에 액세스하고 감시하는 Getter 함수입니다.
[watch]: boolean|WatchOptions
리소스가 변경될 경우 재인덱싱을 수행해야 하는지 또는 지연해야 하는지 여부입니다. 이 옵션은 리소스가 자주 변경될 때 재색인 오버헤드를 방지하는 데 유용합니다. 재색인화는 작업 reindex 매핑하여 수행할 수 있습니다.
WatchOptions
[delay]: number
제공된 경우 reindex는 지정된 지연으로 디바운싱됩니다.
기본값: 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 라이선스에 따라 사용할 수 있습니다.
