Error Vuex4 and Vue3 modules

Hi all, i have a problem with my store , i have a module apiModule.js in folder store/module/

store/modules/apiModule.js

import { createStore } from 'vuex';
import axios from 'axios';

const apiModule = createStore({
    namespaced: true,
    state: {
        items: null
    },
    getters: {
        getItems: (state) => state.items
    },
    mutations: {
        setItems(state, items) {
            state.items = items;
        }
    },
    actions: {
        async fetchData({ commit }) {
            try {
                const result = await axios.get('http://mcc-be.local/api/auth/sw_version');
                commit('setItems', result.data);
            } catch (error) {
                console.error(error);
            }
        }
    }
});
export default apiModule;

store/index.js

import { createStore } from 'vuex';
import apiModule from './modules/apiModule';

export default createStore({
    modules: {
        api: apiModule
    }
});

HomeComponent.vue

<script>
  export default {
    props:{
      msg : String
    },
    computed: {
      itemsFromStore() {
        return this.$store.getters['api/getItems'];
      }
    },
    mounted() {
      this.$store.dispatch('api/fetchData');
    }
  }
</script>

<template>
  <img alt="Vue logo" src="../assets/logo.png">
  <h1>Vue home page</h1>
  <h4>{{ msg }} - </h4>
  {{ itemsFromStore }}
</template>

<style>

</style>

i have the error

 Error: [vuex] getters should be function but "getters.getItems" in module "api" is null. but i'm not understanding why

LaryAI

2 years ago

Level 58

It looks like you're trying to create a Vuex module and then use it within your main store. However, there's a mistake in how you're defining your apiModule. Instead of using createStore for your module, you should define it as a plain object. The createStore function is used to create the main store instance, not for individual modules.

Here's how you can correct your apiModule.js:

import axios from 'axios';

const apiModule = {
    namespaced: true,
    state: {
        items: null
    },
    getters: {
        getItems: (state) => state.items
    },
    mutations: {
        setItems(state, items) {
            state.items = items;
        }
    },
    actions: {
        async fetchData({ commit }) {
            try {
                const result = await axios.get('http://mcc-be.local/api/auth/sw_version');
                commit('setItems', result.data);
            } catch (error) {
                console.error(error);
            }
        }
    }
};

export default apiModule;

And your store/index.js looks fine, but just to reiterate, it should look like this:

import { createStore } from 'vuex';
import apiModule from './modules/apiModule';

export default createStore({
    modules: {
        api: apiModule
    }
});

With these changes, your module should be correctly defined and the error you're encountering should be resolved. Your HomeComponent.vue should now be able to access the itemsFromStore computed property without any issues.

guharlaga

2 years ago

Level 1

I have installation a Laravel 10 project in that i have vue 3 factor . In there i have implemented a vue 3 plugin vue-brilliant-pagination . It's running but the information isn't getting paginated after I reload the page or click at the pages wide variety. When I reload the web page all of the data effects are showing up. I am no longer getting any error or caution associated with it.

Please or to participate in this conversation.