vuex search
v2.1
Vuex Search 是一个用于搜索对象集合的插件。由 js-worker-search 提供支持的搜索算法。
npm install --save vuex-search
# or
yarn add vuex-searchvuex-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' ,
} ,
] ,
} ,
}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实例。
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 许可证下使用。
