Vue 3 VueX mapGetters возврощает undefined. Как с этим боротся?

Question

У меня есть компонент. И глобальный state vuex.

Когда я из компонента вызываю

...mapGetters('addPerson', {
    personStyle: 'personStyle',
    personForm: 'personForm',
}),

То оно возвращает undefined.

Кто то может мне помочь разобраться с этим?

Вот сам код.

Компонент

<template>
    <div class="edit-div" id="editPopup">
        
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import BreezeValidationErrors from '@/Components/ValidationErrors'

    export default {
        components: {
            BreezeValidationErrors
        },
        methods: {
            
        },
        updated() {
            console.log(this.personStyle)
            console.log(this.$store)
        },
        mounted() {
            console.log(this.personStyle)
            console.log(this.$store)
        },
        computed: {
            ...mapGetters('addPerson', {
                personStyle: 'personStyle',
                personForm: 'personForm',
            }),
        },
    }
</script>

State

const state = {
    personStyle: {
        display: 'none',
        left: 0,
        top: 0,
    },
    personForm: []
}
const getters = {
    personStyle: (state) => state.personStyle,
    personForm: (state) => state.personForm
}
const mutations = {
    setStyle: (state, style) => {
        state.personStyle = style;
    },
    setForm: (state, form) => {
        state.personForm = form;
    }
}
export default {
    namespaced: true,
    mutations,
    getters,
}

А модули прикручиваются так.

import addPerson from "@/store/addPerson";
//...............

import Vuex from "vuex";

const modules = {
    addPerson,
}
export const store = new Vuex.Store({
    modules
})

Answer 1

Проблема похоже именно в импорте конфигурации модуля (что-то не так с конфигом Vuex), т.к. почти тот же самый код, но без импортов - работает корректно:

const addPerson = {
  namespaced: true, 
  state: {
    personStyle: {
      display: 'none',
      left: 0,
      top: 0,
    },
    personForm: [],
  },
  getters: {
    personStyle: (state) => state.personStyle,
    personForm: (state) => state.personForm
  },
  mutations: {
    setStyle: (state, style) => {
      state.personStyle = style;
    },
    setForm: (state, form) => {
      state.personForm = form;
    },
  },
};

const app = Vue.createApp({
  computed: {
    ...Vuex.mapGetters('addPerson', ['personStyle', 'personForm']), 
  },
  mounted() {
    console.log(this.personStyle); 
    console.log('has addPerson module: ' + this.$store.hasModule('addPerson')); 
  }, 
});
app.use(Vuex.createStore({ modules: { addPerson }}));
app.mount('#app');

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/vuex.global.prod.js"></script>
<div id="app">
  <pre>{{ personStyle }}</pre>
  <pre>{{ personForm }}</pre>
</div>

Что делать в таких ситуациях, как бороться:

проверять что фактически импортируется (выводом в консоль)
сверять схему своих объектов конфигурации (которые передаются конструкторам библиотек Vue и Vuex) с документацией
перезапускать devserver при изменениях в импортах :)

Upd.:

Причина проблемы оказалась в схеме объекта конфига Vuex - в экспортируемом объекте было пропущено свойство state.
То есть, при выполнении рекомендаций из списка выше, помог бы второй пункт.

БЛОГ НА HUSL

Vue 3 VueX mapGetters возврощает undefined. Как с этим боротся?

Ответы (1 шт):

Upd.: