|
1 |
| -# Vuex Orm Plugin: Search |
| 1 | +# Vuex Orm Plugin: Soft Delete |
2 | 2 |
|
3 |
| -This plugin adds a **search()** method to the vuex-orm query methods to easily filter matched records using fuzzy search logic from the [Fuse.js](http://fusejs.io/) library. |
| 3 | +... in progress |
4 | 4 |
|
5 |
| -A simple example to search for '_john_' within your query: |
6 |
| - |
7 |
| -```javascript |
8 |
| -const data = this.$store.getters['entities/users/query']() |
9 |
| - .search('john') |
10 |
| - .orderBy('name', 'asc') |
11 |
| - .offset(0) |
12 |
| - .limit(10) |
13 |
| - .get() |
14 |
| -``` |
15 |
| - |
16 |
| -### API |
17 |
| -The search plugin method accepts two parameters |
18 |
| - |
19 |
| -- **term** : any string or an array of strings |
20 |
| -- **options** : see the _Fuse.js Default Options_ below |
21 |
| - |
22 |
| -**Note:** If passing an array of search terms, the results assume every element in the array must be matched. |
23 |
| - |
24 |
| -```typescript |
25 |
| -search(term: string | Array<string>, options: Object<any>): Array<Records> |
26 |
| -``` |
27 |
| - |
28 |
| -## Requirements: |
29 |
| - |
30 |
| -The search plugin requires **@vuex-orm/core** package version **0.23.2** |
31 |
| - |
32 |
| -To upgrade the **vuex-orm package** simply run |
33 |
| -```bash |
34 |
| -npm install @vuex-orm/core |
35 |
| -``` |
36 |
| - |
37 |
| -## Installation |
38 |
| -```bash |
39 |
| -npm install @vuex-orm/plugin-search --save |
40 |
| -``` |
41 |
| - |
42 |
| -## Plugin Import Directions |
43 |
| - |
44 |
| -Import the search plugin in the Vuex Store entry file. |
45 |
| - |
46 |
| -```javascript |
47 |
| -// ex: store/index.js |
48 |
| -import VuexORM from '@vuex-orm/core' |
49 |
| -import VuexORMSearch from '@vuex-orm/plugin-search' |
50 |
| -```` |
51 |
| - |
52 |
| -Tell VuexORM to install the plugin |
53 |
| - |
54 |
| -```javascript |
55 |
| -VuexORM.use(VuexORMSearch, { |
56 |
| - // configure default fuse.js options here (see below) |
57 |
| -}) |
58 |
| -``` |
59 |
| - |
60 |
| -## Fuse.js Default Options |
61 |
| - |
62 |
| -The plugin provides opinionated default fuse.js options for token based matching for optimum performance. These options are easily changed at two stages of the plugin lifecycle: |
63 |
| - |
64 |
| -- Plugin installation (sets the global default options) |
65 |
| -- Runtime within the **search()** query chain |
66 |
| - |
67 |
| -see: [Fuse.js](http://fusejs.io/) for demo |
68 |
| - |
69 |
| -| Property | Description | Default | |
70 |
| -| --- | --- | --- | |
71 |
| -| searchPrimaryKey | Also search the primary key | false | |
72 |
| -| location | Approximately where in the text is the pattern expected to be found | 0 | |
73 |
| -| distance | Determines how close the match must be to the fuzzy location | 100 | |
74 |
| -| threshold | **0.0** requires a perfect match, and a threshold of **1.0** would match anything | 0.3 | |
75 |
| -| maxPatternLength | Machine word size | 32 | |
76 |
| -| caseSensitive | Indicates whether comparisons should be case sensitive | false | |
77 |
| -| tokenSeparator | Regex used to separate words when searching. Only applicable when **tokenize** is **true** | / +/g | |
78 |
| -| findAllMatches | When true, the algorithm continues searching to even if a perfect match is found | false | |
79 |
| -| minMatchCharLength | Minimum number of characters that must be matched before a result is considered a match | 1 | |
80 |
| -| keys | An array of fields (columns) to be included in the search | Model.$fields() | |
81 |
| -| shouldSort | Whether to sort the result list, by score | false | |
82 |
| -| tokenize | When true, the search algorithm will search individual words **and** the full string, computing the final score as a function of both. **Note**: that when _tokenize_ is _true_, the **threshold**, **distance**, and **location** are inconsequential for individual tokens | false | |
83 |
| -| matchAllTokens | When true, the result set will only include records that match all tokens. Will only work if **tokenize** is also true. **Note**: It is better to use multiple **.search()** query chains if you have multiple terms that need to match. | false | |
84 |
| -| verbose | Will print to the console. Useful for debugging. | false | |
85 |
| - |
86 |
| -## Option Use Examples |
87 |
| - |
88 |
| -Some examples on how to use the search plugin with case specific options |
89 |
| - |
90 |
| -### During Plugin Install |
91 |
| - |
92 |
| -For example, if we want to match based on case sensitive and no fuzzy search logic (perfect match) |
93 |
| -```javascript |
94 |
| -VuexORM.use(VuexORMSearch, { |
95 |
| - caseSensitive: true, |
96 |
| - threshold: 0 |
97 |
| -}) |
98 |
| -``` |
99 |
| - |
100 |
| -### During Query Chain |
101 |
| - |
102 |
| -The global install options will now default to case sensitive and no fuzzy logic, but for example we have a run-time case we need to ignore case and implement a slightly more strict fuzzy search threshold. |
103 |
| - |
104 |
| -Let's also specify the need to only search the **firstName** and **lastName** fields. |
105 |
| - |
106 |
| -```javascript |
107 |
| -const options = { |
108 |
| - caseSensitive: false, |
109 |
| - threshold: 0.3, |
110 |
| - keys: ['firstName', 'lastName'] |
111 |
| -} |
112 |
| -const data = this.$store.getters['entities/users/query']() |
113 |
| - .search('john', options) |
114 |
| - .orderBy('firstName', 'asc') |
115 |
| - .offset(0) |
116 |
| - .limit(10) |
117 |
| - .get() |
118 |
| -``` |
119 |
| - |
120 |
| -### Finding Results Matching Multiple Terms |
121 |
| - |
122 |
| -Let's find all matches where both **pat** and **male** exist in our records, and sort by the date added. |
123 |
| - |
124 |
| -```javascript |
125 |
| -const terms = ['pat', 'male'] |
126 |
| -const options = { |
127 |
| - keys: ['firstName', 'gender'] |
128 |
| -} |
129 |
| -const data = this.$store.getters['entities/users/query']() |
130 |
| - .search(terms, options) |
131 |
| - .orderBy('createdAt', 'desc') |
132 |
| - .get() |
133 |
| -``` |
134 |
| - |
135 |
| -## License |
136 |
| - |
137 |
| -The Vuex ORM Plugin Search is open-sourced software licensed under the [MIT license](LICENSE.md). |
| 5 | +npm install |
| 6 | +npm i -g vue-build |
| 7 | +npm run test |
0 commit comments