[6.x] Switch from Vuex to Pinia

[jasonvarga]

This switches Vuex to Pinia.

Vuex has always been a little confusing and overkill with its actions + mutations workflow. Now using Pinia it's much simpler.

Vuex was being used in a number of places in order to keep chunks of centralized data. In most places I've refactored away from using Vuex or Pinia at all. Instead, opting to use Vue's ref to keep a simple reactive array of stuff.

The only real place that uses Pinia now is the publish component (which is used all over the place).

There are some simple breaking changes though.

---

The this.$store Vuex helper has been removed. Any components attempting to access the store were probably already getting the injected storeName property. Now the actual Pinia store itself will be provided. There's no need for the storeName property anymore if you were just using it to access the store.

{
    inject: [
-       'storeName',
+       'store',
    ],
    methods: {
        myMethod() {
-           const values = this.$store.state.publish[this.storeName].values;
+           const values = this.store.values;
        }
    }
}

If you were using Statamic.$store, you should also be relying on the provided store.

---

Similarly, in field actions you would get the store api and storeName in the payload. Now you get the store itself.

Statamic.$fieldActions.add('text-fieldtype', {
    title: 'Example',
    run: ({ store, storeName }) => {
-       const values = store.state.publish[storeName].values;
+       const values = store.values;
    }
})

---

If you were dispatching actions or committing mutations, you will now call methods on the store directly.

-this.$store.dispatch(`publish/${this.storeName}/doSomething`), arg);
+this.store.doSomething(arg);

-this.$store.commit(`publish/${this.storeName}/doSomething`), arg);
+this.store.doSomething(arg);

---

If you want to create your own store, you can now use Pinia yourself.

-Statamic.$store.registerModule('myModule', {
-  state: {
-    hello: 'world',
-  }
-});
-const hello = Statamic.$store.state.myModule.hello;

+const useStore = Statamic.$pinia.defineStore({
+  state: {
+    hello: 'world'
+  }
+})
+const store = useStore();
+const hello = store.hello;

Contrary to the Pinia docs, you should not npm require pinia, and not import { whatever } from 'pinia'.
Instead, use methods from Statamic.$pinia which ensures you are sharing the same instance of Pinia with Statamic.