Can't get value of a state in vuex store

[oussama-he]

I’m facing a problem with Vuex store in a quasar project generated by the CLI. I can’t get the state and its value in the .vue file.
state.js

export default function () {
  return {
    projects: [...],
  }
}

Index.vue

<template>
  <q-page>
    <ul>
      <li v-for="project in projects" :key="project.slug">
        {{ project.title }}
      </li>
    </ul>
  </q-page>
</template>
import {mapActions, mapState, mapGetters} from 'vuex'
export default {
  name: "PageIndex",
  data() {
    return {
      ...mapState('example', ['projects'])
    };
  },
// ...
}

When I try console.log(this.projects) I get this:

function mappedState() {
  var state = this.$store.state;
  var getters = this.$store.getters;
  if (namespace) {
    var module = getModuleByNamespace(this.$store, "mapState", namespace);
    if (!module) {
      return;
    }
    state = module.context.state;
    getters = module.context.getters;
  }
  return typeof val === "function"
    ? val.call(this, state, getters)
    : state[val];
}

Any help, please?
Thank you in advance.

[dobbel]

@oussama-he

most important file you did not list: src/store/index.js

don’t put the mapState into data

data() {
    return {
      ...mapState('example', ['projects'])
    };
  },

instead put the mapped state into the computed section

computed: {
     ...mapState('example', ['projects'])
}