Get vuex store running

[QuasarModo]

Hello QuasarCom,

I write my first app with quasar to learn more and I like it very much.

Now I like to get my first small vuex store running and followed some tutorials like this.

Thats my simple small store:

const state = {
  posts: []
};

const mutations = {
  SET_POSTS(state, posts) {
    state.posts = posts;
  }
};

const actions = {
  getPosts({ commit }) {
    this.$axios.get("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {
        commit("SET_POSTS", response.data);
      });
  }
};

const getters = {
  posts: (state) => state.posts

};

const setters = {

};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
  setters
};

and I like to use it in my component with:

<template>
  <div class="hello">
    <div v-for='post in posts' :key='post.id'>
  <h3>Post Title: </h3>  {{post.title}}
      <h3>Post Body: </h3>{{post.body}}
    </div>
    <h2>Essential Links/h2>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: 'myStore',
  data () {
    return {
      msg: 'Welcome to my Vuex Store'
    }
  },
  computed: {
        ...mapGetters("posts", ["posts"])
  },
  mounted() {
    this.$store.dispatch("getPosts");
  }
}
</script>

In my chrome vue dev tools it shows the posts state and getter but its empty, if I call the url directly I get posts. What did I miss here?

Thank you

[s.molinari]

Not sure, but are you mapping the getters correctly?

Scott