Is it possible to watch uistate in Vue InstantSearch?

I`m using History router like in this example -

And I need to watch uiState to get actual, I try to listen popstate, or watch window.location.pathname and many other things, but its not working, I try to connect connector connectHits to my component and now i can watch state, but can not get actual uistate, only initial.

I found only one solution - is to use search-function ( and do something like this:

        data() {
            let that = this;
            return {
                searchClient: algoliasearch(),
                insightsClient: aa,
                routing: {},
                uiState: {},
                searchFunction(helper) {
                    if (!this.onStateChange) {
                        this.onStateChange = function ({uiState, setUiState}) {
                            if (that.uiState != uiState.indexName && uiState.indexName) {
                                that.uiState = uiState.indexName;

                        that.uiState = this._initialUiState.indexName;


But maybe was more better solution for this? Case with connector and watch state looks better for me, but I can not get actual uiState from there, I try to use but its return previous uiState, not current.

Hi @dev22,
Can you give us more context on why you want to watch uiState and what you’re trying to achieve with it?
It will help us come up with a better answer :slight_smile:

@eunjae.lee I need to know is filter changed and show what changed in this filter, and for this I need uiState or routeState, because I convert uiState to my routeState, maybe need to write own connector for this, idn.

Hi @dev22,
If I understand correctly, are you looking for a way to get uiState or routeState just for routing? Or do you need it for something else?
If you just need it for routing, we have good examples for you. You don’t have to get uiState or routeState from somewhere else.

We provide them in the methods related to the routing like the following:

        stateMapping: {
          stateToRoute(uiState) {
            return {
              query: uiState.instant_search.query,
                uiState.instant_search.refinementList &&
                uiState.instant_search.refinementList.brand &&
          routeToState(routeState) {
            return {
              instant_search: {
                query: routeState.query,
                refinementList: {
                  brand: routeState.brands && routeState.brands.split('~'),

Would these examples work for you?
Let me know how it goes.

@eunjae.lee I have this state mapping, my problem - I can not watch for uiState, I add state to watch and it working, but I can not got uiState from watch.state, I can do this in sandbox if it will be easier for you and ask there

I still wish to know why you want to watch for uiState and what are you trying to do with it.
Without that information, I cannot give you a good answer.

This is an example which is a bit of a workaround. Not sure if it helps.

@eunjae.lee I need to add my component after ais-hist and it should be related on filter, you example looks good for me, try to work with it, thank you

Thank you. Now I understand your issue correctly.
You can use my example to set some data in the data of your component to make things reactive.

We have some internal discussions somewhat related to this. I hope it will get easier in the future.
Let us know if you have any feedback or question.