Can't get value of a state in vuex store
-
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. -
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
sectioncomputed: { ...mapState('example', ['projects']) }