通过浏览器控制台调用 Vue store 动作

Question

我正在尝试使用带有 router 和 store 的 VUE Vite 创建一个网络应用程序。 vue 文件中的 getter 函数工作正常。我可以访问存储在 store.js 文件中的 chatMessages。

我的问题是我需要使用浏览器从开发控制台中的 store.js 文件调用 addMessage 操作。

问题：我该如何存档？

在较旧的 vue 版本上，将使用 main.js 文件按以下方式完成：

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;

当前vue3 chat.vue文件：

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

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

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

    }
  },
  methods: {

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

当前vue3store.js文件：

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

当前vue3 main.js文件：

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

编辑： 我通过以下方式对其进行了测试，我可以从开发控制台调用 app.addMessage，但现在路由器无法工作。

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

我相信您可以简单地将商店分配给 window 对象。

但是从顶级单个文件组件开始，第一个使用商店而不是在设置中以确保商店加载了所有内容。

前提是你有 App.vue:

在 setup() 中，您将分配：

window.vueStore = store;

并从调用 window.vueStore 的控制台使用它。

Answer 2

store 在此范围内已经可用，可以像 app:

一样公开

window.store = store;

它可以像在应用程序中一样在控制台中使用：

store.dispatch(...)

Answer 3

将商店分配给 window 对象似乎是一种很好的方法，您可以在其中轻松调用它，就像在 domiatorov 的回答中那样。

另一种方法是：

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

第一部分在正文中查询包含 __vue_app__ 的元素，并将 return 您的实例。在那里，您可以访问 config.globalProperties.$store 到 return 您的商店对象。

通过浏览器控制台调用 Vue store 动作

Call Vue store action through browser console

javascript

store

vue.js