Section 15: Better State Management with Vuex - Replacing provide/inject

instead of directly manipulating element, we should trigger mutations.

Getters

In Vue.js, "getters" typically refer to computed properties that are used to retrieve and derive values from the data within your Vue components. Getters are a fundamental concept in Vue's reactive system, allowing you to create dynamic values based on other data properties without explicitly modifying them.

Here's how getters work in Vue.js:

1. Computed Properties (Getters): Computed properties are functions defined within a Vue component that calculate a value based on the component's data. These computed properties are cached and only re-evaluated when their dependencies change. Computed properties are essentially "getters" because they provide a way to retrieve data in a computed manner.

<template>
  <div>
    <p>Original Value: {{ originalValue }}</p>
    <p>Computed Getter: {{ computedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalValue: 5
    };
  },
  computed: {
    computedValue() {
      return this.originalValue * 2;
    }
  }
};
</script>

In this example, the computedValue getter depends on the originalValue data property, and it automatically updates whenever originalValue changes.

2. Benefits of Getters (Computed Properties):
Reactivity: Vue's reactivity system ensures that computed properties are updated automatically when their dependencies change.
Code Organization: Getters help keep your component's logic more organized by separating derived values from the raw data.
Caching: Computed properties are cached based on their dependencies, so they are only recalculated when necessary, improving performance.

 

3. Usage in Templates: Getters can be used in Vue templates just like regular data properties. Vue's reactivity system takes care of updating the template whenever the getter's dependencies change.

4. Methods vs. Computed Properties: While you can achieve similar results using methods in Vue, computed properties (getters) are preferred for derived values that don't change frequently because of their caching mechanism. Methods are called each time they are accessed in templates, which could lead to unnecessary recalculations.

In summary, getters in Vue.js refer to computed properties that allow you to derive dynamic values from existing data within your components. This helps you keep your code organized, ensures efficient updates, and enhances the reactivity of your Vue applications.

 

Here we don't use 'state' parameter, so Vue can give us alert message that we are not using defined parameter, in this case we can just use underscore to replace it. (It can be different by each project setup)

 

It's better to use Actions then directly triggering mutations itself.

Actions and Mutations are not allowing us to run asynchronously.