Hacktoberfest - 4th contribution

For the last contribution in this Hacktoberfest, I decided to take this opportunity to learn a new technology - Vue.js. Therefore, I picked GeekScore as my starting point.

The issue

The project originally used Vue.js 2 and is currently migrating to Vue.js 3. The issue I picked was to do the migration for one of the components - GamesEditDialog.vue

The fix

To resolve this issue, I imported defineComponent and ref from composition-api while removing vuex. An important change in Vue.js 3 is that both the data and methods will be set inside the setup() function.

I had to remove any this instances because in the new composition-API, setup() does not resolve this anymore. Instead, ref is used to manage reactivity. In Vue 2, function data() returns one single object containing the data. However, in Vue 3, the data are defined in setup() with the use of ref to mark each them as a reactive and mutable object. Apart from the data, the two existing methods submitGame() and updateTheGame() were also moved inside this function. The function setup() will then return an object containing these data and methods so that the view can be automatically updated when reactive state changes.

Owner's feedback

The owner suggested that there was an instance where I should use reactive instead of ref. I looked for more explanations and found that while their main purpose is the same, the usage is a bit different. ref is mostly used to wrap non-object data while reactive only wraps an object.

const toDelete = ref(false);

const fields = reactive({
      name: {
        label: 'Name',
        icon: 'dice-multiple-outline',
        value: game.value.name,
        rules: [...standardField, requiredField]
      },
      ...
});

Another suggested change was about the use of props. Instead of directly using props, the repo owner pointed out that I should use toRefs to restructure it to improve readability and maintain consistency.

const { game } = toRefs(props);

Final thoughts

Learning a new technology can be confusing at first, but directly working on an existing project like this really gained me better understanding of the concepts. The comments from the project owner also pointed out the parts that I was missing while learning. Looking through them again, I was able to clarify any confusions between ref, reactive and toRefs.
There is still a long way to learn about Vue.js but I believe this has been a good starting point already and I'm ready to go to the next step.

Issue-4 link: https://github.com/DavidGolodetsky/GeekScore/issues/131
PR-4 link: https://github.com/DavidGolodetsky/GeekScore/pull/202