Topic on Talk:Vue.js

Cavila (talkcontribs)

There's nothing about Vue.js on Manual:Ajax, so I was wondering if there are any special recommendations, dos and don'ts, things to be aware of, relating to Ajax requests if your code is written in Vue.js. For instance, are both jQuery.ajax() and mediawiki.api still ready for use?

Roan Kattouw (WMF) (talkcontribs)

Manual:Ajax needs to be updated more generally, but for Vue.js there's no new special guidance for now. mediawiki.api can still be used in Vue code, and that's what I would recommend using when talking to api.php.

We should add some more guidance in the future around how to use Ajax in Vue code, e.g. how you should load data from Ajax into a data variable, how you should display a loading state while the data hasn't loaded yet, etc.

EGardner (WMF) (talkcontribs)

We used mediawiki.api in the Commons MediaSearch feature. I think that calls to mediawiki.api are good candidates for Vuex actions if you are using state management – you might need to hang onto the returned data and access it from multiple components to avoid making redundant requests, so using a store can be handy here.

This Vuex action is basically a wrapper around an mw.Api request. One consequence of doing things this way was that we ended up needing to mock mw.Api in Jest for headless unit tests (fortunately this was pretty straightforward). We are also using $.Deferred objects internally in our code for consistency with what the API client returns, though really this should all be native promises.

Cavila (talkcontribs)

Many thanks for your replies and the links provided. I will happily stick to mediawiki.api for now and delve into Vuex eventually, as more use cases relevant to state management turn up (absolute beginner here). I love the MediaSearch interface!

Reply to "Vue.js and Ajax?"