Problem with vuex getters

Hi everybody, I have created a vuex getter called "visiblePosts", basially it filters posts where isVisible is 1 and counts the results, however there's a problem.

Since posts initial state is null since these are retrieved via ajax call I get the following error:

[Vue warn]: Error in render: "TypeError: state.posts is null"

found in

---> <AdminPanel> at resources/js/components/admin/AdminPanel.vue
       <Root> app.js:2474:7
TypeError: "state.posts is null"

This makes the component to not render at all, how can I fix this?

My Post module:

import axios from 'axios'
//STATE
const state = {
    post:null,
    posts: null,
    activeModal: null,
    loadingStatus:0,
    
}

//GETTERS
const getters = {

    visiblePosts: state => {
      return state.posts.filter((post) => post.isVisible === 1).length
    },

}

//ACTIONS
const actions = {

    fetchAllPosts ({ commit }) {

        commit( 'SET_LOAD_STATUS', 1);
        axios.get('/posts')
        .then((response) => {
            commit('FETCH_ALL_POSTS',  response.data.posts )
            commit( 'SET_LOAD_STATUS', 2 );
        }, 
        (error) => {
            console.log(error);
            commit( 'SET_LOAD_STATUS', 3 );
        })
    },



}

//MUTATIONS
const mutations = {

    FETCH_ALL_POSTS (state, posts) {
        state.posts = posts;
    },


}

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

And my component, this is where I show visiblePosts getter state using interpolation:

<template>
<section>
    <div class="body_maincontainer">
        <div class="sidebar_entries_container" :class="{ sidebar_collapsed: sidebarCollapsed === true }">
            <div class="sidebar_entry_container active_entry" title="Contador de visitas">
                <i class="sidebar_entry_icon fas fa-chart-line"></i>
                <span class="sidebar_entry_text">Visitas ({{ allglobals.pageviews.totalViews }})</span>
            </div>
            <button class="sidebar_entry_container form_show_results" type="button" @click="showPanel('global-panel')" title="Información general del restaurante ">
                <i class="sidebar_entry_icon fas fa-cog"></i>
                <span class="sidebar_entry_text">General</span>
            </button>
            <button class="sidebar_entry_container form_show_results" type="button" @click="showPanel('post-panel')" title="Publicaciones de eventos, noticias... ">
                <i class="sidebar_entry_icon far fa-edit"></i>
                <span class="sidebar_entry_text">Publicaciones {{ visiblePosts }}</span>
            </button>
        </div>
        <div class="entries_maincontainer">
            <component :is="activePanel"></component>
        </div>
    </div>
</section>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {

name: 'AdminPanel',

props: {
    allglobals: {required:true}
},

mounted() {
    console.log(this.$options.name+' component successfully mounted');
},

computed: {
    ...mapState('AdminPanel', ['activePanel', 'sidebarCollapsed']),
    ...mapGetters('Posts', ['visiblePosts']),
},

methods: {
    ...mapActions('AdminPanel', ['showPanel', 'toggleSidebar']),
}
};
</script>
<!--STYLES-->
<style scoped>
.sidebar_collapsed{width:0px !important}
</style>