UI libraries / Vue InstantSearch / Widgets
Signature
import { simple } from 'instantsearch.js/es/lib/stateMappings';

const routing = {
  stateMapping: simple(),
};

About this widget

The simple state mapping is used by default within ais-instant-search.

The only transformation applied by the function is the omission of configure.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { simple } from 'instantsearch.js/es/lib/stateMappings';

simple().stateToRoute({
  instant_search: {
    query: 'Apple',
    page: 5,
    configure: {
      hitsPerPage: 4,
    },
  },
});

// gives as output:
// {
//   instant_search: {
//     query: 'Apple',
//     page: 5,
//   },
// }

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <ais-instant-search
    [...]
    :routing="routing"
  >
    <!-- Widgets -->
  </ais-instant-search>
</template>

<script>
  import { simple } from 'instantsearch.js/es/lib/stateMappings';

  export default {
    data() {
      return {
        // ...
        routing: {
          stateMapping: simple()
        },
      };
    }
  };
</script>
Did you find this page helpful?