Computed function running without to call it

Question

I'm setting an array in my data property through a computed function and it's working. But I wonder how is possible if I don't call it anywhere? If I try to add a console.log in my function it doesn't print anything, but it's still setting my data, how is that possible?

My data:

 data() {
    return {
      projects: []
    };
  },

My computed:

computed: {
  loadedProjects() {
    console.log("Hello there")
    this.projects = this.$store.getters.loadedProjects
   }
},

I expect that it doesn't run because I'm not calling, and if it is running(I don't know why) to print the console.log before to set my data. Any clarification? Thanks:)

Answer 1

You're confusing computed props with methods. If you want to have a method like above that sets a data value of your vue instace, you should use a method, not a computed prop:

 data() {
    return {
      projects: []
    };
  },
 methods: {
   loadProjects() {
     console.log("Hello there")
     this.projects = this.$store.getters.loadedProjects
   }
 }

This would get the value of this.$store.getters.loadedProjects once and assign it to your local projects value. Now since you're using Vuex, you probably want your local reference to stay in sync with updates you do to the store value. This is where computed props come in handy. You actually won't need the projects in data at all. All you need is the computed prop:

computed: {
  projects() {
    return this.$store.getters.loadedProjects
   }
},

Now vue will update your local reference to projects whenever the store updates. Then you can use it just like a normal value in your template. For example

<template>
  <div v-for='item in projects' :key='item.uuid'>
    {{item.name}}
  </div>
</template>

Avoid side effects in your computed properties, e.g. assigning values directly, computed values should always return a value themselves. This could be applying a filter to your existing data e.g.

computed: {
  completedProjects() {
    return this.$store.getters.loadedProjects.filter(x => x.projectCompleted)
  },
  projectIds() {
    return this.$store.getters.loadedProjects.map(x => x.uuid)
  }
}

You get the idea.. More about best practices to bring vuex state to your components here: https://vuex.vuejs.org/guide/state.html

Computed props docs: https://v2.vuejs.org/v2/guide/computed.html