vuex search

Vuex Search เป็นปลั๊กอินสำหรับค้นหาคอลเลกชันของวัตถุ อัลกอริธึมการค้นหาที่ขับเคลื่อนโดย js-worker-search

ดูตัวอย่างการทำงานได้ที่นี่

การติดตั้ง:

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

ภาพรวม

vuex-search ค้นหาคอลเลกชันของเอกสารและส่งกลับผลลัพธ์เป็น Array ของรหัสเอกสาร สิ่งสำคัญคือต้องทราบว่าเอกสารจะไม่ถูกส่งคืน เนื่องจากการค้นหาจริงจะดำเนินการในเธรดของผู้ปฏิบัติงานเว็บด้วยเหตุผลด้านประสิทธิภาพ เพื่อหลีกเลี่ยงการทำให้เอกสารเป็นอนุกรมและส่งต่อไปมา vuex-search เพียงแค่ส่งรหัสของพวกเขา

ด้วยเหตุนี้ แต่ละเอกสารต้องมีแอตทริบิวต์ id

โปรดทราบว่าการค้นหา vuex ขึ้นอยู่กับรันไทม์ของตัวสร้างใหม่ คุณต้องรวมปลั๊กอิน transform-runtime ไว้ในการกำหนดค่า babel ของคุณ

{
  "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' ,
      } ,
    ] ,
  } ,
}

ปลั๊กอินค้นหา Vuex

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

    หากมีการระบุ การทำดัชนีใหม่จะถูก debounced โดยมีความล่าช้าตามที่ระบุ

  ค่าเริ่มต้น: 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-search

อินสแตนซ์ 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