Outputting data from Vuex store to Vue component?

Question

JavaScript

I need to create a Vue component that will accept Json data from a Vuex store. When I create test code in the sandbox everything works. But when you try to transfer this code to the project, problems begin.
Test code in the sandbox (works, solves the problem): https://jsfiddle.net/ostapenko25/s3yzpgea/13/
The working code in the project differs in that the storage in the project is already divided into modules, and I need to create and include a new module. I do it like this:
Index.js file with Vuex module registration:

import Vue from 'vue'
import Vuex from 'vuex'
import filters from './filters'
import odds from './odds'
import games from './games'
import games_list from './games_list'
import user from './user'
import vuexteststore from './vuexteststore'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        filters,
        odds,
        games,
        games_list,
        user,
        vuexteststore // мой новый компонент
    }
 })

Store module of the new vuexteststore.js component (different from the sandbox code because I need to create a child component instead of the root one):

export default {
 state: {
    posts: [],
  },
  actions: {
    loadData({commit}) {
      axios.get('https://jsonplaceholder.typicode.com/posts').then((response) =>      {       
        commit('getPosts', response.data)
      })
    }
  },
  mutations: {
    getPosts(state, posts) {
      state.posts = posts
    },
  }
}

New component vuextest.vue

<template> 
        <ul>
          <li v-for="post in posts">
            <h1>
              {{post.id}}) {{post.title}}
            </h1>
            <p>
              {{post.body}}
            </p>
          </li>       
        </ul>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: "VuexTest",  
  computed: {
    ...mapState(['posts']) // в песчнице эта строка выглядит как Vuex.mapState(['posts']), но в проекте такая конструкция приводит к ошибке Vuex is not defined
  },    
  created() {    
    this.$store.dispatch('loadData') 
  } 
}     
</script>

I then wrap the new component inside the parent component where it should be located in the project. The new component is displayed, but no data is displayed from the store. Vue-Devtools shows posts:undefined. That is, the component is connected, but does not receive data and is not rendered. I think I'm calling action or mapState incorrectly. Please tell me how to do it correctly.

Answer 1

As a result, the problem was solved as follows:
1. Rewrite the calculated properties in the component to getters:

computed: {
 ...mapGetters(['posts'])
}

2. In the repository, respectively, add:
And it all worked.

Answer 2

well, you can do this...
https://jsfiddle.net/nhgofLx2/2

Answer 3

View the code with Ctrl+U, read the sources =) I've looked briefly, but each letter is a separate block...