refactor: replace Vuex with Pinia

assets/js/app/editor/index.js

@@ -1,8 +1,4 @@
 import Vue from 'vue';
-/**
- * VueX Store
- */
-import store from './store';
 /**
  * Components
  */
@@ -52,7 +48,6 @@ const editorSelector = '#' + id;
 
 if (document.getElementById(id)) {
     new Vue({
-        store,
         el: editorSelector,
         name: 'BoltEditor',
     });

assets/js/app/listing/Components/Filter.vue

@@ -60,7 +60,9 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
 import type from '../mixins/type';
+import { useGeneralStore, useSelectingStore } from '../store';
 
 export default {
     name: 'ListingFilter',
@@ -69,34 +71,27 @@ export default {
         labels: Object,
     },
     computed: {
-        size() {
-            return this.$store.getters['general/getRowSize'];
-        },
-        sorting() {
-            return this.$store.getters['general/getSorting'];
-        },
-        selectAll() {
-            return this.$store.getters['selecting/selectAll'];
-        },
+        ...mapState(useGeneralStore, { size: 'rowSize', sorting: 'sorting' }),
+        ...mapState(useSelectingStore, ['selectAll']),
     },
     watch: {
         sorting() {
-            if (this.sorting) this.$store.dispatch('selecting/selectAll', false);
+            if (this.sorting) useSelectingStore(this.$pinia).selectAll = false;
         },
     },
     created() {
         const size = localStorage.getItem('listing-row-size');
-        if (size !== null) this.$store.dispatch('general/setRowSize', size);
+        if (size !== null) useGeneralStore(this.$pinia).rowSize = size;
     },
     methods: {
         enableSorting(arg) {
-            this.$store.dispatch('general/setSorting', arg);
+            useGeneralStore(this.$pinia).sorting = arg;
         },
         enableSelectAll(arg) {
-            this.$store.dispatch('selecting/selectAll', arg);
+            useSelectingStore(this.$pinia).selectAll = arg;
         },
         changeSize(size) {
-            this.$store.dispatch('general/setRowSize', size);
+            useGeneralStore(this.$pinia).rowSize = size;
             localStorage.setItem('listing-row-size', size);
         },
     },

assets/js/app/listing/Components/Records.vue

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+import { useGeneralStore, useListingStore } from '../store';
+
 export default {
     name: 'ListingRecords',
     props: {
@@ -11,8 +13,8 @@ export default {
         labels: Object,
     },
     created() {
-        this.$store.dispatch('general/setType', this.type);
-        this.$store.dispatch('listing/setRecords', this.data);
+        useGeneralStore(this.$pinia).type = this.type;
+        useListingStore(this.$pinia).records = this.data;
     },
 };
 </script>

assets/js/app/listing/Components/SelectBox.vue

@@ -47,7 +47,9 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
 import Multiselect from 'vue-multiselect';
+import { useListingStore, useSelectingStore } from '../store';
 
 export default {
     name: 'ListingSelectedBox',
@@ -98,15 +100,13 @@ export default {
 
             return '';
         },
-        selectedCount() {
-            return this.$store.getters['selecting/selectedCount'];
-        },
-        selected() {
-            return this.$store.getters['selecting/selected'];
-        },
-        order() {
-            return this.$store.getters['listing/getOrder'];
-        },
+        ...mapState(useSelectingStore, ['selectedCount', 'selected']),
+        // Dead code: nothing reads or submits `order`. It belongs to the
+        // unfinished drag-and-drop sorting of records, like the commented-out
+        // toggle in Filter.vue and the unused _Sorting.vue handle.
+        ...mapState(useListingStore, {
+            order: store => store.records.map(record => record.id),
+        }),
     },
 };
 </script>

assets/js/app/listing/Components/Table/Row/_Checkbox.vue

@@ -8,6 +8,9 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
+import { useGeneralStore, useSelectingStore } from '../../../store';
+
 export default {
     name: 'Checkbox',
     props: {
@@ -19,21 +22,17 @@ export default {
         };
     },
     computed: {
-        selectAll() {
-            return this.$store.getters['selecting/selectAll'];
-        },
-        sorting() {
-            return this.$store.getters['general/getSorting'];
-        },
+        ...mapState(useSelectingStore, ['selectAll']),
+        ...mapState(useGeneralStore, ['sorting']),
     },
     watch: {
         selectAll() {
             this.selected = this.selectAll;
         },
         selected() {
             this.selected
-                ? this.$store.dispatch('selecting/select', this.id)
-                : this.$store.dispatch('selecting/deSelect', this.id);
+                ? useSelectingStore(this.$pinia).select(this.id)
+                : useSelectingStore(this.$pinia).deSelect(this.id);
         },
         sorting() {
             if (this.sorting) this.selected = false;

assets/js/app/listing/Components/Table/Row/_Sorting.vue

@@ -5,12 +5,13 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
+import { useGeneralStore } from '../../../store';
+
 export default {
     name: 'Sorting',
     computed: {
-        sorting() {
-            return this.$store.getters['general/getSorting'];
-        },
+        ...mapState(useGeneralStore, ['sorting']),
     },
 };
 </script>

assets/js/app/listing/Components/Table/Row/index.vue

@@ -45,7 +45,9 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
 import type from '../../../mixins/type';
+import { useGeneralStore } from '../../../store';
 import { raw, trim } from '../../../../../filters/string';
 import Checkbox from './_Checkbox';
 import Meta from './_Meta';
@@ -74,12 +76,7 @@ export default {
             // if slug has different locales, return the 0st one
             return this.record.fieldValues.slug[Object.keys(this.record.fieldValues.slug)[0]];
         },
-        size() {
-            return this.$store.getters['general/getRowSize'];
-        },
-        sorting() {
-            return this.$store.getters['general/getSorting'];
-        },
+        ...mapState(useGeneralStore, { size: 'rowSize', sorting: 'sorting' }),
     },
     methods: {
         raw,

assets/js/app/listing/Components/Table/index.vue

@@ -9,8 +9,10 @@
 </template>
 
 <script>
+import { mapWritableState } from 'pinia';
 import draggable from 'vuedraggable';
 import Row from './Row';
+import { useListingStore } from '../../store';
 
 export default {
     name: 'ListingTable',
@@ -22,14 +24,7 @@ export default {
         labels: Object,
     },
     computed: {
-        records: {
-            get() {
-                return this.$store.getters['listing/getRecords'];
-            },
-            set(val) {
-                this.$store.dispatch('listing/setRecords', val);
-            },
-        },
+        ...mapWritableState(useListingStore, ['records']),
     },
 };
 </script>

assets/js/app/listing/index.js

@@ -1,8 +1,8 @@
 import Vue from 'vue';
 /**
- * VueX Store
+ * Pinia
  */
-import store from './store';
+import { createPinia, PiniaVuePlugin } from 'pinia';
 /**
  * Components
  */
@@ -11,14 +11,16 @@ import Filter from './Components/Filter';
 import Table from './Components/Table';
 import SelectBox from './Components/SelectBox';
 
+Vue.use(PiniaVuePlugin);
+
 /**
  * Register Components
  */
 const id = 'listing';
 
 if (document.getElementById(id)) {
     new Vue({
-        store,
+        pinia: createPinia(),
         el: '#' + id,
         name: 'BoltListing',
         components: {

assets/js/app/listing/mixins/type.js

@@ -1,7 +1,8 @@
+import { mapState } from 'pinia';
+import { useGeneralStore } from '../store';
+
 export default {
     computed: {
-        type() {
-            return this.$store.getters['general/getType'];
-        },
+        ...mapState(useGeneralStore, ['type']),
     },
 };

assets/js/app/listing/store/index.ts

@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia';
+import type { ListingRecord } from '../types';
+
+interface GeneralState {
+    type: string | null;
+    rowSize: string;
+    sorting: boolean;
+}
+
+export const useGeneralStore = defineStore('listing-general', {
+    state: (): GeneralState => ({
+        type: null,
+        rowSize: 'normal',
+        sorting: false,
+    }),
+});
+
+interface ListingState {
+    records: ListingRecord[];
+}
+
+export const useListingStore = defineStore('listing', {
+    state: (): ListingState => ({
+        records: [],
+    }),
+});
+
+interface SelectingState {
+    selectAll: boolean;
+    selected: number[];
+}
+
+export const useSelectingStore = defineStore('selecting', {
+    state: (): SelectingState => ({
+        selectAll: false,
+        selected: [],
+    }),
+    getters: {
+        selectedCount: state => state.selected.length,
+    },
+    actions: {
+        select(id: number) {
+            if (!this.selected.includes(id)) {
+                this.selected.push(id);
+            }
+        },
+        deSelect(id: number) {
+            const index = this.selected.indexOf(id);
+            if (index > -1) this.selected.splice(index, 1);
+        },
+    },
+});