Call Vue store action through browser console

Question

I'm trying to create a webapp using VUE Vite with a router and store. The getter function in the vue file works fine. I have access to the chatMessages stored in the store.js file.

My problem is that I need to call the addMessage Action from the store.js file in the dev console using the browser.

Question: How could I archive this?

On older vue versions it would be done the following way using the main.js file:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
import { mapGetters, mapMutations, mapActions } from 'vuex';


Vue.config.productionTip = false;

const app = new Vue({
    router,
    store,
    render: function (h) { return h(App) },
    methods: {
        ...mapMutations([
            'showLoading',
        ]),

        ...mapActions([
            'addNotification',
        ]),
    },
}).$mount('#app');
export default app;

Current vue3 chat.vue file:

<template>
  <div></div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'Chat',
  data: function() {
    return {

    }
  },
  methods: {

  },
  computed: {
    ...mapGetters({
      chatMessages: 'chatMessageList',
    }),
  }
}
</script>

Current vue3 store.js file:

import { createStore } from 'vuex'

export default createStore({
    state: {
        chatMessages: {
            list: [
                { type: "a", message: "test" }
            ]
        }
    },
    mutations: {
        addMessage(state, { type, message }) {
            state.chatMessages.list.push({ type: type, message: message });
        }
    },
    actions: {
        addMessage({ commit }, { type, message }) {
            commit('addMessage', { type, message });
        }
    },
    getters: {
        chatMessageList(state, getters) {
            return state.chatMessages.list;
        }
    }
})

Current vue3 main.js file:

import App from "./App.vue";
import {createApp} from "vue";
import router from "./router/index.js";
import store from "./store/store";

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.js";

window.app = createApp(App).use(router).use(store).mount('#app');

EDIT: I tested it the following way and I can call app.addMessage from the dev console but now the router wont work.

import App from "./App.vue";
import {createApp} from "vue";
import router from "./router/index.js";
import store from "./store/store";
import { mapGetters, mapMutations, mapActions } from 'vuex';

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.js";

window.app = createApp({
    methods: {
        ...mapActions([
            'addMessage',
        ]),
    }
}).use(router).use(store).mount('#app');

Answer 1

store is already available in this scope and can be exposed the same way as app:

window.store = store;

It can be used in console the same way as in an app:

store.dispatch(...)