Call Vue store action through browser console-CodePudding

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');

CodePudding user response：

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(...)

CodePudding user response：

I believe you can simply assign the store to the window object.

But do it from a top level single file component, the very first that is using the store and not in the setup to make sure the store got everything loaded.

Providing you have something like App.vue:

In setup() you would assign:

window.vueStore = store;

and use it from the console calling window.vueStore.

CodePudding user response：

Assigning the store to the window object seems like a great approach, where you can easily then call it like in domiatorov's answer.

Another approach is:

var store = Array.from(document.querySelectorAll('*')).find(e => e.__vue_app__).__vue_app__.config.globalProperties.$store;

var actions = store._actions;

actions.addMessage[0]('mytype', 'mymessage');

The first part queries the body for an element containing __vue_app__ and will return your instance. In there, you can access config.globalProperties.$store to return your store object.