vuex search

يعد Vuex Search مكونًا إضافيًا للبحث في مجموعات الكائنات. خوارزميات البحث مدعومة بـ js-worker-search.

انظر مثال العمل هنا.

تثبيت:

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

ملخص

يبحث vuex-search في مجموعات المستندات ويعيد النتائج Array من معرفات المستندات. من المهم ملاحظة أن المستندات نفسها لا يتم إرجاعها. وذلك لأن البحث الفعلي يتم إجراؤه في سلسلة رسائل عامل الويب لأسباب تتعلق بالأداء. لتجنب إجراء تسلسل للمستندات وتمريرها ذهابًا وإيابًا، يقوم vuex-search بتمرير معرفاتها ببساطة.

ولهذا السبب، يجب أن يحتوي كل مستند على سمة id .

يرجى ملاحظة أن vuex-search يعتمد على وقت تشغيل المجدد، وتحتاج إما إلى تضمين البرنامج الإضافي transform-runtime في تكوين babel الخاص بك،

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

أو قم بإضافة babel-polyfill في إدخالاتك (بافتراض أنك تستخدم حزمة الويب). على سبيل المثال

 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

    إذا تم توفيره، فسيتم استخدامه كواجهة برمجة تطبيقات افتراضية عبر الموارد. راجع تخصيص فهرس البحث. الافتراضي: 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

  الحالة المعينة هي مجموعة من المعرفات.

• 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.

يمكن الوصول إلى مثيل VuexSearch من خلال سمة search الخاصة store . وبالتالي، في مثيل Vue، يتم الوصول إليه من خلال this.$store.search . الطرق المتاحة هي:

registerResource(resourceName, options: IndexOptions)

• options: IndexOptions

  قائمة خيارات فهرسة الموارد. راجع IndexOptions .

لاحظ أن هذه الطريقة تختلف قليلاً عن registerResource من mapActions . يحتاج استدعاء هذه الطريقة إلى توفير 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.