[6.x] Switch from Vuex to Pinia

package.json

@@ -70,6 +70,7 @@
     "mousetrap": "~1.6.5",
     "nprogress": "^0.2.0",
     "pdfobject": "^2.2.7",
+    "pinia": "^2.3.1",
     "portal-vue": "^3.0.0",
     "pretty": "^2.0.0",
     "pusher-js": "^8.4.0-rc2",
@@ -91,8 +92,7 @@
     "vue-final-modal": "^4.5.4",
     "vue-screen-utils": "^1.0.0-beta.13",
     "vue-select": "4.0.0-beta.6",
-    "vue3-click-away": "^1.2.4",
-    "vuex": "^4.1.0"
+    "vue3-click-away": "^1.2.4"
   },
   "devDependencies": {
     "@rollup/plugin-inject": "^5.0.3",

resources/js/bootstrap/App.vue

@@ -122,8 +122,6 @@ export default {
     },
 
     mounted() {
-        this.bindWindowResizeListener();
-
         this.$keys.bind(['command+\\'], (e) => {
             e.preventDefault();
             this.toggleNav();
@@ -166,13 +164,6 @@ export default {
     },
 
     methods: {
-        bindWindowResizeListener() {
-            window.addEventListener('resize', () => {
-                this.$store.commit('statamic/windowWidth', document.documentElement.clientWidth);
-            });
-            window.dispatchEvent(new Event('resize'));
-        },
-
         toggleNav() {
             this.navOpen = !this.navOpen;
             localStorage.setItem('statamic.nav', this.navOpen ? 'open' : 'closed');

resources/js/bootstrap/statamic.js

@@ -1,6 +1,6 @@
 import { createApp, ref, markRaw } from 'vue';
 import App from './App.vue';
-import { store } from '../store/store';
+import { createPinia, defineStore } from 'pinia';
 import axios from 'axios';
 import Config from '../components/Config';
 import Preferences from '../components/Preference';
@@ -50,12 +50,8 @@ export default {
         bootedCallbacks.push(callback);
     },
 
-    get $store() {
-        return store;
-    },
-
     get $config() {
-        return new Config(store);
+        return this.$app.config.globalProperties.$config;
     },
 
     get $preferences() {
@@ -90,6 +86,10 @@ export default {
         return this.$app.config.globalProperties.$echo;
     },
 
+    get $pinia() {
+        return { defineStore };
+    },
+
     get $permissions() {
         return this.$app.config.globalProperties.$permissions;
     },
@@ -111,7 +111,7 @@ export default {
     },
 
     config(config) {
-        store.commit('statamic/config', config);
+        this.initialConfig = config;
     },
 
     component(name, component) {
@@ -124,7 +124,7 @@ export default {
         this.$app.config.silent = false;
         this.$app.config.devtools = true;
 
-        this.$app.use(store);
+        this.$app.use(createPinia());
         this.$app.use(PortalVue, { portalName: 'v-portal' });
         this.$app.use(VueClickAway);
         this.$app.use(FloatingVue, { disposeTimeout: 30000, distance: 10 });
@@ -145,13 +145,16 @@ export default {
 
         components = new Components(this.$app);
 
+        Object.assign(this.$app.config.globalProperties, {
+            $config: new Config(this.initialConfig),
+        });
+
         Object.assign(this.$app.config.globalProperties, {
             $axios: axios,
             $moment: window.moment,
             $events: useGlobalEventBus(),
-            $preferences: new Preferences(store),
+            $preferences: new Preferences(),
             $progress: useProgressBar(),
-            $config: this.$config,
             $keys: new Keys(),
             $fieldActions: new FieldActions(),
             $conditions: new FieldConditions(),

resources/js/components/Config.js

@@ -1,17 +1,19 @@
+import { ref } from 'vue';
+
 export default class Config {
-    constructor(store) {
-        this.store = store;
+    constructor(initialConfig) {
+        this.config = ref(initialConfig);
     }
 
     all() {
-        return this.store.state.statamic.config;
+        return this.config.value;
     }
 
     get(key, fallback) {
         return data_get(this.all(), key, fallback);
     }
 
     set(key, value) {
-        this.store.commit('statamic/configValue', { key, value });
+        this.config.value[key] = value;
     }
 }

resources/js/components/FieldConditions.js

@@ -1,5 +1,13 @@
+import { ref } from 'vue';
+
+const conditions = ref({});
+
 export default class FieldConditions {
     add(name, condition) {
-        Statamic.$store.commit('statamic/condition', { name, condition });
+        conditions.value[name] = condition;
+    }
+
+    get(name) {
+        return conditions.value[name];
     }
 }

resources/js/components/Preference.js

@@ -1,13 +1,14 @@
 import axios from 'axios';
+import { ref } from 'vue';
 
 export default class Preference {
-    constructor(store) {
-        this.store = store;
+    constructor() {
         this.url = cp_url('preferences/js');
+        this.preferences = ref(Statamic.$config.get('user.preferences'));
     }
 
     all() {
-        return this.store.state.statamic.config.user.preferences;
+        return this.preferences.value;
     }
 
     get(key, fallback) {
@@ -32,7 +33,7 @@ export default class Preference {
 
     commitOnSuccessAndReturnPromise(promise) {
         promise.then((response) => {
-            this.store.commit('statamic/preferences', response.data);
+            this.preferences.value = response.data;
         });
 
         return promise;

resources/js/components/UpdatesBadge.vue

@@ -5,44 +5,30 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+const count = ref(null);
+const requested = ref(false);
+
 export default {
     computed: {
         count() {
-            return this.$store.state.updates.count;
+            return count;
         },
     },
 
     created() {
-        this.registerVuexModule();
-
         this.getCount();
     },
 
     methods: {
-        registerVuexModule() {
-            if (this.$store.state.updates) return;
-
-            this.$store.registerModule('updates', {
-                namespaced: true,
-                state: {
-                    count: 0,
-                    requested: false,
-                },
-                mutations: {
-                    count: (state, count) => (state.count = count),
-                    requested: (state) => (state.requested = true),
-                },
-            });
-        },
-
         getCount() {
-            if (this.$store.state.updates.requested) return;
+            if (requested.value) return;
 
             this.$axios
                 .get(cp_url('updater/count'))
-                .then((response) => this.$store.commit('updates/count', !isNaN(response.data) ? response.data : 0));
+                .then((response) => (count.value = !isNaN(response.data) ? response.data : 0));
 
-            this.$store.commit('updates/requested');
+            requested.value = true;
         },
     },
 };

resources/js/components/collections/OneOrManySitesField.vue

@@ -46,22 +46,20 @@
 
 <script>
 export default {
-    props: ['handle', 'value', 'state', 'columnHeader'],
+    props: ['handle', 'value', 'store', 'columnHeader'],
 
     computed: {
         mode() {
             return this.value === null || typeof this.value === 'string' ? 'single' : 'multiple';
         },
 
         sites() {
-            let state = this.state;
+            if (!this.store.values.sites) return [];
 
-            if (!state.values.sites) return [];
-
-            return state.values.sites.map((handle, i) => {
+            return this.store.values.sites.map((handle, i) => {
                 return {
                     handle,
-                    name: state.meta.sites.data[i].title,
+                    name: this.store.meta.sites.data[i].title,
                 };
             });
         },

resources/js/components/collections/Routes.vue

@@ -2,7 +2,7 @@
     <one-or-many-sites-field
         :handle="handle"
         :value="value"
-        :state="$store.state.publish[this.storeName]"
+        :store="store"
         @input="update"
         :column-header="__('Route')"
     ></one-or-many-sites-field>
@@ -14,7 +14,7 @@ import OneOrManySitesField from './OneOrManySitesField.vue';
 
 export default {
     mixins: [Fieldtype],
-    inject: ['storeName'],
+    inject: ['store'],
     components: { OneOrManySitesField },
 };
 </script>

resources/js/components/collections/TitleFormats.vue

@@ -2,7 +2,7 @@
     <one-or-many-sites-field
         :handle="handle"
         :value="value"
-        :state="$store.state.publish[this.storeName]"
+        :store="store"
         @input="update"
         :column-header="__('Format')"
     ></one-or-many-sites-field>
@@ -14,7 +14,7 @@ import OneOrManySitesField from './OneOrManySitesField.vue';
 
 export default {
     mixins: [Fieldtype],
-    inject: ['storeName'],
+    inject: ['store'],
     components: { OneOrManySitesField },
 };
 </script>

resources/js/components/configure/Tabs.vue

@@ -28,29 +28,23 @@
 export default {
     emits: ['updated', 'meta-updated', 'synced', 'desynced', 'focus', 'blur'],
 
-    inject: ['storeName'],
+    inject: ['store', 'storeName'],
 
     props: {
         readOnly: Boolean,
         syncable: Boolean,
     },
 
     data() {
-        const state = this.$store.state.publish[this.storeName];
-
         return {
-            active: state.blueprint.tabs[0].handle,
+            active: this.store.blueprint.tabs[0].handle,
             containerWidth: null,
         };
     },
 
     computed: {
-        state() {
-            return this.$store.state.publish[this.storeName];
-        },
-
         tabs() {
-            return this.state.blueprint.tabs;
+            return this.store.blueprint.tabs;
         },
 
         actionsPortal() {

resources/js/components/entries/PublishForm.vue

@@ -895,7 +895,7 @@ export default {
                 this.save();
             }, this.autosaveInterval);
 
-            this.$store.commit(`publish/${this.publishContainer}/setAutosaveInterval`, interval);
+            this.$refs.container.setAutosaveInterval(interval);
         },
 
         afterActionSuccessfullyCompleted(response) {
@@ -928,7 +928,7 @@ export default {
             this.save();
         });
 
-        this.$store.commit(`publish/${this.publishContainer}/setPreloadedAssets`, this.preloadedAssets);
+        this.$refs.container.store.setPreloadedAssets(this.preloadedAssets);
 
         if (typeof this.autosaveInterval === 'number') {
             this.setAutosaveInterval();
@@ -949,7 +949,7 @@ export default {
     },
 
     beforeUnmount() {
-        this.$store.commit(`publish/${this.publishContainer}/clearAutosaveInterval`);
+        this.$refs.container.store.clearAutosaveInterval();
     },
 
     unmounted() {

resources/js/components/field-conditions/Validator.js

@@ -19,13 +19,12 @@ chainable({ chain, map, each, filter, reject, first, isEmpty });
 const NUMBER_SPECIFIC_COMPARISONS = ['>', '>=', '<', '<='];
 
 export default class {
-    constructor(field, values, dottedFieldPath, store, storeName) {
+    constructor(field, values, dottedFieldPath, store) {
         this.field = field;
         this.values = values;
         this.dottedFieldPath = dottedFieldPath;
         this.store = store;
-        this.storeName = storeName;
-        this.rootValues = store ? store.state.publish[storeName].values : false;
+        this.rootValues = store ? store.values : false;
         this.passOnAny = false;
         this.showOnPass = true;
         this.converter = new Converter();
@@ -243,7 +242,7 @@ export default class {
     }
 
     passesCustomCondition(condition) {
-        let customFunction = data_get(this.store.state.statamic.conditions, condition.functionName);
+        let customFunction = Statamic.$conditions.get(condition.functionName);
 
         if (typeof customFunction !== 'function') {
             console.error(`Statamic field condition [${condition.functionName}] was not properly defined.`);
@@ -257,7 +256,6 @@ export default class {
             values: this.values,
             root: this.rootValues,
             store: this.store,
-            storeName: this.storeName,
             fieldPath: this.dottedFieldPath,
         });
 
@@ -271,7 +269,7 @@ export default class {
             return this.passesConditions(conditions);
         }
 
-        let revealerFields = data_get(this.store.state.publish[this.storeName], 'revealerFields', []);
+        let revealerFields = this.store.revealerFields || [];
 
         let nonRevealerConditions = chain(this.getConditions())
             .reject((condition) =>