Page MenuHomePhabricator

Migrate all extension code using Vuex to Vuex 4
Open, Needs TriagePublic

Description

After we upgrade Vuex from version 3 to version 4, migrate all extension code that uses Vuex away from the version 3 calling style to the version 4 calling style.

Version 3 calling style:

const App = require( './App.vue' );
const store = new Vuex.Store( ... );
Vue.createMwApp( $.extend( { store: store }, App ) )
    .mount( '#selector' );

Version 4 calling style:

const App = require( './App.vue' );
const store = Vuex.createStore( ... ); // change new Vuex.Store() to Vuex.createStore()
Vue.createMwApp( App ) // remove { store: store }
    .use( store ) // add .use()
    .mount( '#selector' );

Extension checklist

  • ContentTranslation
  • MachineVision
  • MediaSearch
  • Wikibase
  • Wikibase termbox
  • WikibaseLexeme
  • WikiLambda

Event Timeline

I’m not sure what the intended timeline is. For Vue 2/3, extensions can call createMwApp() even while MediaWiki is still on Vue 2, because createMwApp() already exists; is something similar eventually planned for Vuex? (Right now Vuex.createStore() doesn’t seem to exist on MediaWiki master.)

Sorry, I should have clarified this: this task is meant to be done after Vuex has been upgraded to v4 (see T289017 for the order of operations). The "version 3 calling style" snippet above should work during the entire migration (i.e. both before and after the Vue 2->3 migration, and both before and after the Vuex 3->4 migration). See this diff for the backwards compatibility code that makes the version 3 calling style work under Vuex 4.

Before the Vuex 3->4 migraton, extension code will have to be updated to use the Vue.createMwApp() calling style ("version 3 calling style" above) as opposed to the new Vue() calling style. That is tracked in T289089.

Change 755436 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/extensions/WikiLambda@master] Vuex: Migrate store creation from Vuex 3 to Vuex 4

https://gerrit.wikimedia.org/r/755436

One issue I encountered while experimenting migrating from Vuex 3 to 4, but I think was introduced in Vuex 3.4.0 is the the fact that the result of dispatching an action is wrapped inside a native Promise object. In the GrowthExperiments extension we use a lot the jquery $.Deferred() API which has other methods like .done(), .always(), etc. and some of the exisiting "promise chains" would fail due to this. Also seems this would automatically drop IE11 support.

One idea we are exploring is to use Vuex without Vue to handle state management in the GE extension. Vue is also required since it is a dependency of Vuex but this would technically allow us to modernize our current code by splitting code into stores and use it from both Vue components and the current OO.ui.Widget we are using.

@Catrope Does the Vue compatibility build have any effect on the Vuex version? Would it be possible to get a different Vuex version from ResourceLoader?

Change 755436 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] Vuex: Migrate store creation from Vuex 3 to Vuex 4

https://gerrit.wikimedia.org/r/755436

Adding Design-Systems-Team because Design-Systems-team-20200324-20220422 got archived though this open task has no other active project tags associated, so it cannot be found on boards.

@Catrope Does the Vue compatibility build have any effect on the Vuex version? Would it be possible to get a different Vuex version from ResourceLoader?

Unfortunately we don't support loading older versions of Vuex currently. We could support that, but I'd rather not unless there's a compelling reason to. However, we are considering supporting Pinia soon (see T305517), perhaps that could meet your needs.