Как реализовать вывод данных из хранилища Vuex в компонент Vue?

Question

Юлия Остапенко @YuliaOstapenko

Vue.js
Vuex

Как реализовать вывод данных из хранилища Vuex в компонент Vue?

Мне нужно создать компонент Vue, который будет принимать данные Json из хранилища Vuex. Когда я создаю тестовый код в песочнице, все работает. Но при попытке перенести этот код в проект начинаются проблемы.

Тестовый код в песочнице (работает, задачу решает): https://jsfiddle.net/ostapenko25/s3yzpgea/13/

Рабочий код в проекте отличается тем, что хранилище в проекте уже разбито на модули, и мне нужно создать и поключить новый модуль. Я делаю это так:

Файл index.js с регистрацией модулей Vuex:

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 // мой новый компонент
    }
 })

Модуль хранилища нового компонента vuexteststore.js (отличается от кода в песочнице, т.к. мне нужно создать не корневой компонент, а дочерний):

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
    },
  }
}

Новый компонент 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>

Затем я поключаю новый компонент внутрь родительского компонента, где он должен быть расположен в проекте. Новый компонент отображается, однако данные из хранилища не выводятся. Vue-Devtools показывает posts:undefined. То есть компонент подключен, но не получает данные и не рендерится. Думаю, я неправильно вызываю action или mapState. Подскажите, пожалуйста, как сделать это корректно.