Not Working with vuex?

[sebastianjung]

Hey guys,

one thing upfront: Thanks for the package. I was looking for quite a long time for something like this.

I have some troubles with my vuex store in combination with vue-pjax-adapter though.

It seems that the store is not connected to the component anymore after it gets loaded via ajax and i do not know enough about the handling of components with the main vue instance to solve it by myself.

The error is as follows:

Property or method "$store" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Anyone able to help me out on this?

Thanks in advance,

Sebastian Jung

[barnabaskecskes]

Hi @sebbler1337 - I don't use Vuex myself, so don't know the answer from the top of my head. Can you create a repo where you reproduce the issue and I can have a closer look at it?

[sebastianjung]

Sure, will try to do this later. Thanks for trying to help!

[sebastianjung]

It seems the problem has nothing to do especially with components but with accessing the vuex store on the pjax loaded content in general.

here is the repo with an example:

https://github.com/sebbler1337/vue-pjax-adapter-with-vuex

Thanks for helping!

[sebastianjung]

It seems the problem is also not related to vuex itself but that the html loaded by pjax is not recognized by Vue

[barnabaskecskes]

Is your main Vue instance available on the window?

[sebastianjung]

How can i find this out?

I applied the Vue instance to a const in my app.js.

import pjaxAdapter from 'vue-pjax-adapter';
window.Vue.use(pjaxAdapter);

const app = new Vue({
    el: '#app',
    store,
    data: {
        pIsVisible: true
    },
    mounted() {
        this.logStore();
    },
    methods: {
        logStore() {
            console.log(this.$store);
        }
    }
});

[sebastianjung]

adding window.vue = app afterwards didn't help it seems.

[barnabaskecskes]

You can find it out just by going to your javascript console in the browser and type 'Vue' - it should not return undefined. However, it may have nothing to do with it anyways.

I suggest you create that repo when you have a few minutes and I'll have a look at it as currently I'm shooting in the dark I'm afraid.

[sebastianjung]

Oh i created the repo already. Isn't it public to you?

https://github.com/sebbler1337/vue-pjax-adapter-with-vuex

[barnabaskecskes]

Sorry, I scrolled right past that post of yours! 😂 I'll have a look.

[barnabaskecskes]

Hmmm it really does that. I couldn't figure it out in 10 mins so I will have to get back to it later to have a more thorough look and replicate the issue with tests, etc. Thanks for bringing this to my attention - I'll get back to you ASAP.

[sebastianjung]

Not a problem at all. Thanks a lot :)

[barnabaskecskes]

@sebbler1337 I believe this fixes the problem: 810402b

[sebastianjung]

Yay, yes it works! Thank you very much for helping me out.

But one thing that still bugs me is:
Everytime i want to do an ajax call via axios i get a server error with
production.ERROR: Type error: Argument 1 passed to production.ERROR: Type error: Argument 1 passed to Spatie\Pjax\Middleware\FilterIfPjax::filterResponse() must be an instance of Illuminate\Http\Response, instance of Illuminate\Http\JsonResponse given,

First i thought it had something to do with spatie's pjax package but when i deleted the import of the pjax adapter my ajax requests were all fine.

Any ideas on that? Maybe the default header of ajax requests is changed by the pjax adapter which causes problems?

Many Thanks and best regards,

Sebastian

[barnabaskecskes]

That sounds like a routing issue. If you have a look at app/Http/Kernel.php that has a $middleware property up top. Those middleware classes are going to be applied to all of the routes of the application. If you were to move the FilterIfPjax from its Spatie-suggested location to $middlewareGroups['web'] and keep your JSON API routes in /routes/api.php those endpoints should not be affected by the PJAX middleware. I think that might be your solution.

[sebastianjung]

Well, that worked as well, thanks a lot for helping me out! I do have one more question before i leave: Are there events that get fired by the pjax adapter so i can pull in some page transitions or so?

Thanks for your time and this really helpful package :)

[barnabaskecskes]

No events at this moment, but I don't think that's necessary. You can probably wrap your target container (or replace with?) a transition or transition group to make that work. Never tried though so just shooting blind here...

[sebastianjung]

Ok 8l i will try some things. thank you a lot for your time solving my problems 😊👍

[Gerungofulus]

Hey ho,
I have to thank you too for your amazing work. I believe I'm having the same issue, but I don't understand vue well enough yet, so maybe I'm missing something. I have an app defined on some div with the id="content" and I initialised the vue pjax adapter on the same div. The new page is properly loaded, but I haven't been able to figure out, how to keep the state of the current app while the adapter handles the transition from page 1 to page 2. Can you help me with that?

[barnabaskecskes]

Hey @Gerungofulus, sorry for the late response. I hope you have figured this out already, but I give you my two cents anyway...

It sounds a lot like you have a problem with the basic setup you have, albeit it's just an educated guess with the amount of information I have. I'll suggest you follow the documentation of the package from the start and see if every piece of the puzzle is there. (I believe you will have to have a Vue object available on the window.)

To get started with Vue, probably the best resource would be http://vuecasts.com - I cannot recommend enough going through it all! Good luck!