vuex 双向绑定_Vuex绑定用于使用索引器和Web Workers进行客户端搜索

vuex 双向绑定

Vuex搜索 (vuex-search)

Vuex Search is a plugin for searching collections of objects. Search algorithms powered by js-worker-search.

Vuex Search是一个用于搜索对象集合的插件。 由js-worker-search支持的搜索算法。

View demo 查看演示 Download Source 下载源

Installation:

安装：

npm i vuex-search

总览 (Overview)

vuex-search searches collections of documents and returns results as an Array of document ids. It is important to note that the documents themselves aren't returned. This is because the actual search is performed in a web-worker thread for performance reasons. In order to avoid serializing the documents and passing them back and forth, vuex-search simply passes their ids.

vuex-search搜索文档集合并以文档ID Array的形式返回结果。 重要的是要注意文档本身不会被退回。 这是因为出于性能原因，实际搜索是在Web线程中执行的。 为了避免序列化文档并来回传递它们，vuex-search只需传递其ID。

Because of this, each document must contain an id attribute.

因此， 每个文档必须包含一个id属性。

例子 (Examples)

// store/state.js

export default {
  myResources: {
    contacts: [
      {
        // id is required for each record
        id: '1',
        address: '06176 Georgiana Points',
        name: 'Dr. Katrina Stehr',
      },
      {
        id: '2',
        address: '06176 Georgiana Points',
        name: 'Edyth Grimes',
      },
    ],
  },
}

Vuex搜索插件 (Vuex Search plugin)

searchPlugin(options) (searchPlugin(options))

• options: Object: List of options for defining the plugin. Available options are:

  options: Object ：用于定义插件的选项列表。 可用的选项有：

  • resources: Dictionary of resources ：词典resourceName and their index options.resourceName和它们的指数期权。
  • searchApi (optional): searchApi (可选)： Customizing search index.自定义搜索索引。

// 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,
        },
        // otherResource: { index, getter },
      },
    }),
  ],
});

Where each resource has options:

每个资源都有选项的地方：

• index: string[]: List of fields to be indexed.

  index: string[] ：要索引的字段列表。

• getter: (state) => resource: Getter function to access the resource from root state and to watch.

  getter: (state) => resource ：getter函数从根状态访问资源并进行监视。

• searchApi: SearchApi (optional): Custom search index. If defined, it is used instead of the shared searchApi instance.

  searchApi: SearchApi (可选)： 自定义搜索索引。 如果定义，则使用它代替共享的searchApi实例。

与Vue组件绑定 (Binding with Vue Component)

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): mappedGetters (mapGetters(resourceName, getterMap): mappedGetters)

Similar to Vuex helper for mapping attributes, getterMap can be either an object or an array.

与用于映射属性的Vuex帮助器类似， getterMap可以是对象或数组。

mapActions(resourceName, actionMap): mappedActions (mapActions(resourceName, actionMap): mappedActions)

Similar to Vuex helper for mapping attributes, actionMap can be either an object or an array.

与用于映射属性的Vuex帮助器类似， actionMap可以是对象或数组。

getterTypes (getterTypes)

• result

  result

• isSearching

  isSearching

• resourceIndex: full state of resource index (including result, isSearching, and current search)

  resourceIndex ：资源索引的完整状态(包括result ， isSearching和current search )

actionTypes (actionTypes)

• search: mapped action has its first argument the text to search.

  search ：映射操作的第一个参数为要搜索的文本。

自定义搜索索引 (Customizing Search Index)

By default, vuex-search builds an index to match all substrings. You can override this behavior by providing your own, pre-configured searchApi param to the plugin like so:

默认情况下，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
    }),
  ],
});

自定义单词边界(标记化)和区分大小写 (Custom word boundaries (tokenization) and case-sensitivity)

You can also pass parameters to the SearchApi constructor that customize the way the search splits up the text into words (tokenizes) and change the search from the default case-insensitive to case-sensitive:

您还可以将参数传递给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,
      }),
    }),
  ],
});

动态索引注册 (Dynamic Index Registration)

When a module needs to be loaded or registered dynamically, statically defined plugin can be a problem. The solution is to use vuex-search dynamic index registration.

当模块需要动态加载或注册时，静态定义的插件可能会成为问题。 解决方案是使用vuex-search动态索引注册。

Vuex Search can be accessed through store.search or this.$store.search in a Vue instance and available methods are:

可以在Vue实例中通过store.search或this.$store.search访问Vuex搜索，可用的方法有：

registerResource(resourceName, config) (registerResource(resourceName, config))

• config: Object: A list of options for indexing resource. Currently available options are:

  config: Object ：索引资源的选项列表。 当前可用的选项有：

  • index: string[]: List of fields to be indexed.index: string[] ：要索引的字段列表。
  • getter: (state) => resource: Getter function to access the resource from root state and to watch.getter: (state) => resource ：getter函数从根状态访问资源并进行监视。
  • searchApi: SearchApi (optional): searchApi: SearchApi (可选)： Custom search index. If defined, it is used instead of the shared 自定义搜索索引。 如果定义，则使用它代替共享的searchApi instance.searchApi实例。

unregisterResource(resourceName) (unregisterResource(resourceName))

Remove outdated resource indexes, and unwatch/unsubscribe any watchers/subscriptions related to resourceName.

删除过时的资源索引，并取消监视/取消订阅与resourceName相关的所有监视程序/订阅。

改变基础 (Changing Base)

By default, vuex-search will register its module in vuexSearch from root state. To avoid possible clash naming, you can change its base name before defining the plugin in the store through

默认情况下，vuex-search将从根状态开始在vuexSearch注册其模块。 为了避免可能的冲突命名，您可以在通过以下方式在商店中定义插件之前更改其基本名称：

import { VuexSearch } from 'vuex-search';

VuexSearch.base = 'vuexSearchNew';

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

翻译自: https://vuejsexamples.com/vuex-binding-for-client-side-search-with-indexers-and-web-workers/

vuex 双向绑定