refactor: migrated remaining vuex stores to pinia

package.json

@@ -64,7 +64,6 @@
     "vue-datetime": "^1.0.0-beta.13",
     "vue-property-decorator": "^8.5.1",
     "vuedraggable": "^2.24.3",
-    "vuex": "^3.5.1",
     "weekstart": "^1.0.1",
     "xss": "^1.0.8"
   },

src/components/CategoryEditModal.vue

@@ -43,6 +43,7 @@ b-modal(id="edit" ref="edit" title="Edit category" @show="resetModal" @hidden="h
 <script>
 import _ from 'lodash';
 import ColorPicker from '~/components/ColorPicker';
+import { useCategoryStore } from '~/stores/categories';
 
 export default {
   name: 'CategoryEditModal',
@@ -54,6 +55,8 @@ export default {
   },
   data: function () {
     return {
+      categoryStore: useCategoryStore(),
+
       editing: {
         id: 0, // FIXME: Use ID assigned to category in vuex store, in order for saves to be uniquely targeted
         name: null,
@@ -66,7 +69,7 @@ export default {
   },
   computed: {
     allCategories: function () {
-      const categories = this.$store.getters['categories/all_categories'];
+      const categories = this.categoryStore.all_categories;
       const entries = categories.map(c => {
         return { text: c.join('->'), value: c };
       });
@@ -102,7 +105,7 @@ export default {
     removeClass() {
       // TODO: Show a confirmation dialog
       // TODO: Remove children as well?
-      this.$store.commit('categories/removeClass', this.categoryId);
+      this.categoryStore.removeClass(this.categoryId);
     },
     checkFormValidity() {
       // FIXME
@@ -127,15 +130,15 @@ export default {
         rule: this.editing.rule.type !== null ? this.editing.rule : { type: null },
         data: { color: this.editing.inherit_color === true ? undefined : this.editing.color },
       };
-      this.$store.commit('categories/updateClass', new_class);
+      this.categoryStore.updateClass(new_class);
 
       // Hide the modal manually
       this.$nextTick(() => {
         this.$refs.edit.hide();
       });
     },
     resetModal() {
-      const cat = this.$store.getters['categories/get_category_by_id'](this.categoryId);
+      const cat = this.categoryStore.get_category_by_id(this.categoryId);
       const color = cat.data ? cat.data.color : undefined;
       const inherit_color = !color;
       this.editing = {

src/components/CategoryEditTree.vue

@@ -69,13 +69,13 @@ export default {
   },
   methods: {
     addSubclass: function (parent) {
-      this.$store.commit('categories/addClass', {
+      this.categoryStore.addClass({
         name: parent.name.concat(['New class']),
         rule: { type: 'regex', regex: 'FILL ME' },
       });
 
       // Find the category with the max ID, and open an editor for it
-      const lastId = _.max(_.map(this.$store.state.categories.classes, 'id'));
+      const lastId = _.max(_.map(this.categoryStore.classes, 'id'));
       this.editingId = lastId;
     },
     showEditModal: function () {

src/components/Header.vue

@@ -112,6 +112,7 @@ import _ from 'lodash';
 
 import { mapState } from 'pinia';
 import { useSettingsStore } from '~/stores/settings';
+import { useBucketsStore } from '~/stores/buckets';
 
 export default {
   name: 'Header',
@@ -126,8 +127,9 @@ export default {
     ...mapState(useSettingsStore, ['devmode']),
   },
   mounted: async function () {
-    await this.$store.dispatch('buckets/ensureBuckets');
-    const buckets = this.$store.state.buckets.buckets;
+    const bucketStore = useBucketsStore();
+    await bucketStore.ensureLoaded();
+    const buckets = bucketStore.buckets;
     const types_by_host = {};
 
     const activityViews = [];

src/components/QueryOptions.vue

@@ -16,6 +16,7 @@ div
 <script lang="ts">
 import Vue from 'vue';
 import moment from 'moment';
+import { useBucketsStore } from '~/stores/buckets';
 
 export default Vue.extend({
   name: 'QueryOptions',
@@ -26,6 +27,8 @@ export default Vue.extend({
   },
   data() {
     return {
+      bucketsStore: useBucketsStore(),
+
       queryOptionsData: {
         hostname: '',
         start: moment().subtract(1, 'day').format('YYYY-MM-DD'),
@@ -37,7 +40,7 @@ export default Vue.extend({
 
   computed: {
     hostnameChoices() {
-      return this.$store.getters['buckets/hosts'];
+      return this.bucketsStore.hosts;
     },
   },
 
@@ -51,7 +54,7 @@ export default Vue.extend({
   },
 
   async mounted() {
-    await this.$store.dispatch('buckets/ensureBuckets');
+    await this.bucketsStore.ensureLoaded();
     this.queryOptionsData = {
       ...this.queryOptionsData,
       hostname: this.hostnameChoices[0],

src/components/SelectCategories.vue

@@ -28,6 +28,7 @@ b-form-tags#tags-component-select(
 
 <script lang="typescript">
 import Vue from 'vue';
+import { useCategoryStore } from '~/stores/categories';
 
 const SEP = " > ";
 
@@ -40,7 +41,7 @@ export default Vue.extend({
 
   computed: {
     options() {
-      const classes = this.$store.state.categories.classes;
+      const classes = useCategoryStore().classes;
       return classes.map(category => category.name.join(SEP));
     }
   },

src/components/SelectCategoriesOrPattern.vue

@@ -17,6 +17,7 @@ div
 
 <script lang="ts">
 import Vue from 'vue';
+import { useCategoryStore } from '~/stores/categories';
 
 const SEP = ' > ';
 
@@ -37,7 +38,7 @@ export default Vue.extend({
   },
   computed: {
     categories: function () {
-      return this.$store.state.categories.classes;
+      return useCategoryStore().classes;
     },
 
     categoriesWithRules() {
@@ -77,7 +78,7 @@ export default Vue.extend({
     },
   },
   async mounted() {
-    await this.$store.dispatch('categories/load');
+    await useCategoryStore().load();
   },
 });
 </script>

src/components/SelectableVisualization.vue

@@ -16,63 +16,63 @@ div
     b-alert.small.px-2.py-1(show variant="warning")
       | This feature doesn't support the current time period.
 
-  div(v-if="$store.state.activity.buckets.loaded")
+  div(v-if="activityStore.buckets.loaded")
     // Check data prerequisites
     div(v-if="!has_prerequisites")
       b-alert.small.px-2.py-1(show variant="warning")
         | This feature is missing data from a required watcher.
         | You can find a list of all watchers in #[a(href="https://activitywatch.readthedocs.io/en/latest/watchers.html") the documentation].
 
     div(v-if="type == 'top_apps'")
-      aw-summary(:fields="$store.state.activity.window.top_apps",
+      aw-summary(:fields="activityStore.window.top_apps",
                  :namefunc="e => e.data.app",
                  :colorfunc="e => e.data.app",
                  with_limit)
     div(v-if="type == 'top_titles'")
-      aw-summary(:fields="$store.state.activity.window.top_titles",
+      aw-summary(:fields="activityStore.window.top_titles",
                  :namefunc="e => e.data.title",
                  :colorfunc="e => e.data.title",
                  with_limit)
     div(v-if="type == 'top_domains'")
-      aw-summary(:fields="$store.state.activity.browser.top_domains",
+      aw-summary(:fields="activityStore.browser.top_domains",
                  :namefunc="e => e.data.$domain",
                  :colorfunc="e => e.data.$domain",
                  with_limit)
     div(v-if="type == 'top_urls'")
-      aw-summary(:fields="$store.state.activity.browser.top_urls",
+      aw-summary(:fields="activityStore.browser.top_urls",
                  :namefunc="e => e.data.url",
                  :colorfunc="e => e.data.$domain",
                  with_limit)
     div(v-if="type == 'top_editor_files'")
-      aw-summary(:fields="$store.state.activity.editor.top_files",
+      aw-summary(:fields="activityStore.editor.top_files",
                  :namefunc="top_editor_files_namefunc",
                  :hoverfunc="top_editor_files_hoverfunc",
                  :colorfunc="e => e.data.language",
                  with_limit)
     div(v-if="type == 'top_editor_languages'")
-      aw-summary(:fields="$store.state.activity.editor.top_languages",
+      aw-summary(:fields="activityStore.editor.top_languages",
                  :namefunc="e => e.data.language",
                  :colorfunc="e => e.data.language",
                  with_limit)
     div(v-if="type == 'top_editor_projects'")
-      aw-summary(:fields="$store.state.activity.editor.top_projects",
+      aw-summary(:fields="activityStore.editor.top_projects",
                  :namefunc="top_editor_projects_namefunc",
                  :hoverfunc="top_editor_projects_hoverfunc",
                  :colorfunc="e => e.data.language",
                  with_limit)
     div(v-if="type == 'top_categories'")
-      aw-summary(:fields="$store.state.activity.category.top",
+      aw-summary(:fields="activityStore.category.top",
                  :namefunc="e => e.data['$category'].join(' > ')",
                  :colorfunc="e => e.data['$category'].join(' > ')",
                  with_limit)
     div(v-if="type == 'category_tree'")
-      aw-categorytree(:events="$store.state.activity.category.top")
+      aw-categorytree(:events="activityStore.category.top")
     div(v-if="type == 'category_sunburst'")
       aw-sunburst-categories(:data="top_categories_hierarchy", style="height: 20em")
     div(v-if="type == 'timeline_barchart'")
-      aw-timeline-barchart(:datasets="datasets", :resolution="$store.state.activity.query_options.timeperiod.length[1]", style="height: 100")
+      aw-timeline-barchart(:datasets="datasets", :resolution="activityStore.query_options.timeperiod.length[1]", style="height: 100")
     div(v-if="type == 'sunburst_clock'")
-      aw-sunburst-clock(:date="date", :afkBucketId="$store.state.activity.buckets.afk[0]", :windowBucketId="$store.state.activity.buckets.window[0]")
+      aw-sunburst-clock(:date="date", :afkBucketId="activityStore.buckets.afk[0]", :windowBucketId="activityStore.buckets.window[0]")
     div(v-if="type == 'custom_vis'")
       aw-custom-vis(:visname="props.visname" :title="props.title")
 </template>
@@ -100,6 +100,9 @@ import { buildBarchartDataset } from '~/util/datasets';
 // TODO: Move this somewhere else
 import { build_category_hierarchy } from '~/util/classes';
 
+import { useActivityStore } from '~/stores/activity';
+import { useCategoryStore } from '~/stores/categories';
+
 function pick_subname_as_name(c) {
   c.name = c.subname;
   c.children = c.children.map(pick_subname_as_name);
@@ -116,6 +119,9 @@ export default {
   },
   data: function () {
     return {
+      activityStore: useActivityStore(),
+      categoryStore: useCategoryStore(),
+
       types: [
         'top_apps',
         'top_titles',
@@ -156,55 +162,51 @@ export default {
       return {
         top_apps: {
           title: 'Top Applications',
-          available:
-            this.$store.state.activity.window.available ||
-            this.$store.state.activity.android.available,
+          available: this.activityStore.window.available || this.activityStore.android.available,
         },
         top_titles: {
           title: 'Top Window Titles',
-          available: this.$store.state.activity.window.available,
+          available: this.activityStore.window.available,
         },
         top_domains: {
           title: 'Top Browser Domains',
-          available: this.$store.state.activity.browser.available,
+          available: this.activityStore.browser.available,
         },
         top_urls: {
           title: 'Top Browser URLs',
-          available: this.$store.state.activity.browser.available,
+          available: this.activityStore.browser.available,
         },
         top_editor_files: {
           title: 'Top Editor Files',
-          available: this.$store.state.activity.editor.available,
+          available: this.activityStore.editor.available,
         },
         top_editor_languages: {
           title: 'Top Editor Languages',
-          available: this.$store.state.activity.editor.available,
+          available: this.activityStore.editor.available,
         },
         top_editor_projects: {
           title: 'Top Editor Projects',
-          available: this.$store.state.activity.editor.available,
+          available: this.activityStore.editor.available,
         },
         top_categories: {
           title: 'Top Categories',
-          available: this.$store.state.activity.category.available,
+          available: this.activityStore.category.available,
         },
         category_tree: {
           title: 'Category Tree',
-          available: this.$store.state.activity.category.available,
+          available: this.activityStore.category.available,
         },
         category_sunburst: {
           title: 'Category Sunburst',
-          available: this.$store.state.activity.category.available,
+          available: this.activityStore.category.available,
         },
         timeline_barchart: {
           title: 'Timeline (barchart)',
           available: true,
         },
         sunburst_clock: {
           title: 'Sunburst clock',
-          available:
-            this.$store.state.activity.window.available &&
-            this.$store.state.activity.active.available,
+          available: this.activityStore.window.available && this.activityStore.active.available,
         },
         custom_vis: {
           title: 'Custom Visualization',
@@ -222,7 +224,7 @@ export default {
       return true;
     },
     top_categories_hierarchy: function () {
-      const top_categories = this.$store.state.activity.category.top;
+      const top_categories = this.activityStore.category.top;
       if (top_categories) {
         const categories = top_categories.map(c => {
           return { name: c.data.$category, size: c.duration };
@@ -238,20 +240,19 @@ export default {
     },
     datasets: function () {
       return buildBarchartDataset(
-        this.$store,
-        this.$store.state.activity.category.by_period,
-        this.$store.state.categories.classes
+        this.activityStore.category.by_period,
+        this.categoryStore.classes
       );
     },
     date: function () {
-      let date = this.$store.state.activity.query_options.date;
+      let date = this.activityStore.query_options.date;
       if (!date) {
-        date = this.$store.state.activity.query_options.timeperiod.start;
+        date = this.activityStore.query_options.timeperiod.start;
       }
       return date;
     },
     isSingleDay: function () {
-      return _.isEqual(this.$store.state.activity.query_options.timeperiod.length, [1, 'day']);
+      return _.isEqual(this.activityStore.query_options.timeperiod.length, [1, 'day']);
     },
   },
 };

src/main.js

@@ -30,9 +30,6 @@ Vue.prototype.$aw = getClient();
 // Sets up the routing and the base app (using vue-router)
 import router from './route.js';
 
-// Sets up the vuex store
-import store from './store';
-
 // Sets up the pinia store
 import pinia from './stores';
 
@@ -85,6 +82,5 @@ new Vue({
   el: '#app',
   router: router,
   render: h => h(App),
-  store,
   pinia,
 });