Vuex Mutation commited only once Component is selected in Devtools

I have a component that looks roughly like this:

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    data() {
        return {
            foos: []
        }
    },

    methods: {
        fetchSomeDataFromServer(){
            // and write it to this.foos
        }
    },

    computed: {
        getTopics(): Topic[] {
            let topics: Topics[] = [];

            for(const foo in this.foos){
                // some calculation that updates the topic array
            }
            this.$store.commit('setTopics', topics); // <- PROBLEM
            return topics;
        }
    }
})
</script>

and the store looks like this:

export default {
    state: {
        topics: [] as Topic[],
    },

    mutations: {
        setTopics(state, topics: Topic[]): void {
            state.topics = topics;
        },
    },
};

When the page is loaded an empty array is commited, no problems.
But once the data is loaded and the topic array is no longer empty, the state property ‘topics’ is only updated when I open then Vue devtools and go to the Components tab and click on my component to see it’s state. I really don’t understand why. Just to make sure that it isn’t a issue with the array being passed as a reference, I tried commiting a JSON String and then parsing the string in the mutation. But again same problem.

Originally I emitted an event and passed the topic array, but there I had the same problem. The events where only being fired once I looked at the state of the component in the devtools.

Is there something I am missing here?

  • Computed properties are evaluated lazily (only when they are first used somewhere)
  • You should never cause any side effects or change any state inside of a computed property.

Thanks!
Is this information somewhere in the docs? If not, it should be, because this is important for people to know.

Hi

It’s documented here: https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed.

However you are changing foos so it should have re-evaluated :confused:

Hi @johandalabacka
I meant the fact that computed properties are evaluated lazily. I couldn’t find that info in the docs. The reason it wasn’t working as it should was because I wasn’t using it anywhere yet