Migrate data option to functions

resources/assets/js/annotations/stores/annotations.vue

@@ -7,8 +7,10 @@ import ImagesApi from '@/core/api/images.js';
 */
 
 export default new Vue({
-    data: {
-        cache: {},
+    data() {
+        return {
+            cache: {},
+        };
     },
     computed: {
         shapeMap() {

resources/assets/js/annotations/stores/images.vue

@@ -8,27 +8,29 @@ export class CrossOriginError extends Error {}
 * Store for the images of the annotation tool
 */
 export default new Vue({
-    data: {
-        initialized: false,
-        cache: {},
-        cachedIds: [],
-        maxCacheSize: 2,
-        supportsColorAdjustment: false,
-        currentlyDrawnImage: null,
-        colorAdjustmentDefaults: {
-            brightnessContrast: [0, 0],
-            brightnessRGB: [0, 0, 0],
-            hueSaturation: [0, 0],
-            vibrance: [0],
-            gamma: [1],
-        },
-        colorAdjustment: {
-            brightnessContrast: [0, 0],
-            brightnessRGB: [0, 0, 0],
-            hueSaturation: [0, 0],
-            vibrance: [0],
-            gamma: [1],
-        },
+    data() {
+        return {
+            initialized: false,
+            cache: {},
+            cachedIds: [],
+            maxCacheSize: 2,
+            supportsColorAdjustment: false,
+            currentlyDrawnImage: null,
+            colorAdjustmentDefaults: {
+                brightnessContrast: [0, 0],
+                brightnessRGB: [0, 0, 0],
+                hueSaturation: [0, 0],
+                vibrance: [0],
+                gamma: [1],
+            },
+            colorAdjustment: {
+                brightnessContrast: [0, 0],
+                brightnessRGB: [0, 0, 0],
+                hueSaturation: [0, 0],
+                vibrance: [0],
+                gamma: [1],
+            },
+        };
     },
     computed: {
         imageFileUri() {

resources/assets/js/annotations/stores/settings.js

@@ -24,9 +24,11 @@ let defaults = {
 };
 
 export default new Settings({
-    data: {
-        urlParams: Object.keys(defaults),
-        storageKey: 'biigle.annotations.settings',
-        defaults: defaults,
+    data() {
+        return {
+            urlParams: Object.keys(defaults),
+            storageKey: 'biigle.annotations.settings',
+            defaults: defaults,
+        };
     },
 });

resources/assets/js/core/keyboard.vue

@@ -23,45 +23,47 @@
  * kb.setActiveSet('other-set');
  */
 export default new Vue({
-    data: {
-        activeListenerSetName: 'default',
-        listenerSets: {
-            'default': {},
-        },
-        // Some browsers fire non-standard keys. This map maps standard keys to
-        // non-standard keys so their event listeners are also added. Every key is
-        // converted to lowercase.
-        // see: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
-        compatibilityMaps: [
-            // Firefox
-            {
-                'hyper': 'os',
-                'meta': 'os',
-                'super': 'os',
-            },
-            // InternetExplorer
-            {
-                'meta': 'os',
-                'scrolllock': 'Scroll',
-                ' ': 'spacebar',
-                'arrowdown': 'down',
-                'arrowleft': 'left',
-                'arrowright': 'right',
-                'arrowup': 'up',
-                'crsel': 'crsel',
-                'delete': 'del',
-                'exsel': 'exsel',
-                'contextmenu': 'apps',
-                'escape': 'esc',
+    data() {
+        return {
+            activeListenerSetName: 'default',
+            listenerSets: {
+                'default': {},
             },
-        ],
-        // Events that have these tags as target will be ignored.
-        ignoredTags: [
-            'input',
-            'textarea',
-            'select'
-        ],
-        pressedKeysArray: [],
+            // Some browsers fire non-standard keys. This map maps standard keys to
+            // non-standard keys so their event listeners are also added. Every key is
+            // converted to lowercase.
+            // see: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
+            compatibilityMaps: [
+                // Firefox
+                {
+                    'hyper': 'os',
+                    'meta': 'os',
+                    'super': 'os',
+                },
+                // InternetExplorer
+                {
+                    'meta': 'os',
+                    'scrolllock': 'Scroll',
+                    ' ': 'spacebar',
+                    'arrowdown': 'down',
+                    'arrowleft': 'left',
+                    'arrowright': 'right',
+                    'arrowup': 'up',
+                    'crsel': 'crsel',
+                    'delete': 'del',
+                    'exsel': 'exsel',
+                    'contextmenu': 'apps',
+                    'escape': 'esc',
+                },
+            ],
+            // Events that have these tags as target will be ignored.
+            ignoredTags: [
+                'input',
+                'textarea',
+                'select'
+            ],
+            pressedKeysArray: [],
+        };
     },
     computed: {
         activeListenerSet() {

resources/assets/js/core/messages/store.vue

@@ -5,11 +5,13 @@ import {exitFullscreen} from '../utils.js';
  * The popup message store.
  */
 let store = new Vue({
-    data: {
-        // Maximum number of messages to display until the oldest is automatically
-        // removed.
-        max: 1,
-        all: [],
+    data() {
+        return {
+            // Maximum number of messages to display until the oldest is automatically
+            // removed.
+            max: 1,
+            all: [],
+        };
     },
     methods: {
         post(type, text) {

resources/assets/js/core/notifications/store.vue

@@ -5,9 +5,11 @@
  * Stores information on InAppNotifications to be shared between multiple JS components.
  */
 export default new Vue({
-    data: {
-        all: [],
-        initialized: false
+    data() {
+        return {
+            all: [],
+            initialized: false
+        };
     },
     computed: {
         unread() {

resources/assets/js/core/utils.js

@@ -22,8 +22,10 @@ export let debounce = function (callback, wait, id) {
 };
 
 export let urlParams = new Vue({
-    data: {
-        params: {}
+    data() {
+        return {
+            params: {}
+        };
     },
     methods: {
         setSlug(s, index) {

resources/assets/js/videos/stores/settings.js

@@ -14,9 +14,11 @@ let defaults = {
 };
 
 export default new Settings({
-    data: {
-        urlParams: Object.keys(defaults),
-        storageKey: 'biigle.videos.settings',
-        defaults: defaults,
+    data() {
+        return {
+            urlParams: Object.keys(defaults),
+            storageKey: 'biigle.videos.settings',
+            defaults: defaults,
+        };
     },
 });

resources/assets/js/volumes/stores/files.vue

@@ -3,8 +3,10 @@
  * Store for the file count
  */
 export default new Vue({
-    data: {
-        count: 0,
+    data() {
+        return {
+            count: 0,
+        };
     },
 });
 </script>

resources/assets/js/volumes/volumeContainer.vue

@@ -253,12 +253,14 @@ export default {
         this.sortingSequence = this.fileIds;
         this.volumeId = biigle.$require('volumes.volumeId');
         this.settings = new Settings({
-            data: {
-                storageKey: 'biigle.volumes.settings',
-                defaults: {
-                    showFilenames: false,
-                    showLabels: false,
-                },
+            data() {
+                return {
+                    storageKey: 'biigle.volumes.settings',
+                    defaults: {
+                        showFilenames: false,
+                        showLabels: false,
+                    },
+                };
             },
         });