Vue.js/Vuex to Pinia migration

Introduction
The intent of this article is to support mediawiki migration from Vuex to Pinia in internal projects that may provide an opportunity to do so. At this current stage there is no need to upgrade existing project that are already in production and this update should just be performed on new project that have yet to be published or are at early stage of development.

The FrontEnd team has decided to use Pinia going forward, due to the fact that it has been recommended by the Vue core team as the successor of Vuex. In fact Vuex is not going to receive any further major releases from now on.

Migration in summary
The migration between this two stores is quite simple and it can even happen in stages where both store co-exist in the same application while the migration is in place.

The migration steps are:


 * Add Pinia to your current Vue instance -
 * Create a Pinia store for each Vuex module
 * Update the components to use Pinia
 * Update store unit tests

The first migration was achieved. In the following sections we are going to migrate a very simple vuex store.

Add Pinia to your current Vue instance
Pinia has been added into core with the following task T326174. Pinia can be added to your existing Vue application by using the following code:

Create a store for each module you had
The main difference between Vuex and Pinia is that the latter expects you to create multiple stores. Do not worry, you can still create the nested structure you previously could achieve with Vuex. More info on the Pinia's documentation.

Create folders and files
Create a folder called stores (as Pinia expects multiple stores) and add files within that folder as shown below