blocks|key|2467579|text|试着打电话给this._vm.$bvModal.show('modalId');。参考文献。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2467580|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/vuejs/vuex/issues/1399#issuecomment-449972993^0|6|Y|15|4|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Try to call <code>this._vm.$bvModal.show('modalId');</code>.
<a href="https://github.com/vuejs/vuex/issues/1399#issuecomment-449972993" rel="noreferrer">Reference</a>.

blocks|key|1835588|text|尝试调用this._vm.$root.$bvModal.show('modalId')；|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1835589|entityMap^0|D|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Try to call this._vm.$root.$bvModal.show('modalId');

blocks|key|1835598|text|在这里找到了一个解决方案：https://github.com/vuejs/vuex/issues/1399#issuecomment-491553564|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1835599|import+App+from+'./App.vue';

const+myStore+=+new+Vuex.Store({
++++state:+{
++++++++...
++++},
++++actions:+{
++++++++myAction(ctx,+data)+{
+++++++++++//+here+you+can+use+this.$app+to+access+to+your+vue+application
++++++++++++++this.$app.$root.$bvToast.toast("toast+context",+{
+++++++++++++++++title:+"toast!"
++++++++++++++});
++++++++}
++++}
});

const+app+=+new+Vue({
++++el:+'#my-div',
++++render:+h+=>+h(App),
++++store:+myStore
});

myStore.$app+=+app;+//+<---+!!!+this+line+adds+$app+to+your+store+object|code-block|syntax|javascript|1835600|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/vuejs/vuex/issues/1399#issuecomment-491553564^0|D|1S|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

found a solution here: <a href="https://github.com/vuejs/vuex/issues/1399#issuecomment-491553564" rel="nofollow noreferrer">https://github.com/vuejs/vuex/issues/1399#issuecomment-491553564</a>

<pre><code>import App from './App.vue';

const myStore = new Vuex.Store({
 state: {
 ...
 },
 actions: {
 myAction(ctx, data) {
 // here you can use this.$app to access to your vue application
 this.$app.$root.$bvToast.toast("toast context", {
 title: "toast!"
 });
 }
 }
});

const app = new Vue({
 el: '#my-div',
 render: h =&gt; h(App),
 store: myStore
});

myStore.$app = app; // &lt;--- !!! this line adds $app to your store object
</code></pre>

blocks|key|1835633|text|我认为更好的方法是防止从商店中处理UI。因此，您可以添加存储属性并监视组件中的更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1835634|在下面的示例中，我在state属性中添加了一个数组state，并添加了一个ADD_TOAST_MESSAGE突变以添加一些toastMessage。然后，您可以从另一个突变或操作中提交一个ADD_TOAST_MESSAGE突变。|offset|length|style|CODE|1835635|在顶层组件(App.vue)中，您可以监视toastMessages状态属性的更改，并显示被推送的最后一项。|1835636|App.vue|BOLD|1835637|<script>
export+default+{
++name:+"App",
++created()+{
++++this.$store.watch(
++++++state+=>+state.toastMessages,
++++++toastMessages+=>+{
++++++++this.$bvToast.toast(this.toastMessages.slice(-1)[0]);
++++++}
++++);
++}
}
</script>|code-block|syntax|javascript|1835638|store.js|1835639|export+default+new+Vuex.Store({
++state:+{
++++toastMessages:+[]
++},
++mutations:+{
++++ADD_TOAST_MESSAGE:+(state,+toastMessage)+=>+(state.toastMessages+=+[...state.toastMessages,+toastMessage]),
++},
++actions:+{
++++myActionThatDoSomething({commit},+params)+{
++++++//+Do+something
++++++commit('ADD_TOAST_MESSAGE',+"Something+happened");
++++}
++}
});|1835640|entityMap^0|0|A|5|P|5|11|H|2M|H|0|6|7|L|D|0|0|7|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]|$D|11|E|12|F|G]|$D|13|E|14|F|G]|$D|15|E|16|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|17|8|@$D|18|E|19|F|G]|$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1C|8|@$D|1D|E|1E|F|L]]|9|@]|A|$]]|$1|M|3|N|5|O|7|1F|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1G|8|@$D|1H|E|1I|F|L]]|9|@]|A|$]]|$1|T|3|U|5|O|7|1J|8|@]|9|@]|A|$P|Q]]|$1|V|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|W|$]]

I think a better approach is to prevent to deal with the UI from the Store. So, you can add a store property and watch for changes from your components.

In the following example, I added an array <code>toastMessages</code> in the <code>state</code> property and a <code>ADD_TOAST_MESSAGE</code> mutation to add some toastMessage. You can then commit an <code>ADD_TOAST_MESSAGE</code> mutation from another mutation or from an action.

Inside your Top-level component (<code>App.vue</code>), you can watch for your <code>toastMessages</code> state property changes and display the last item that was pushed.

App.vue

<pre class="lang-js prettyprint-override"><code>&lt;script&gt;
export default {
 name: "App",
 created() {
 this.$store.watch(
 state =&gt; state.toastMessages,
 toastMessages =&gt; {
 this.$bvToast.toast(this.toastMessages.slice(-1)[0]);
 }
 );
 }
}
&lt;/script&gt;
</code></pre>

store.js

<pre class="lang-js prettyprint-override"><code>export default new Vuex.Store({
 state: {
 toastMessages: []
 },
 mutations: {
 ADD_TOAST_MESSAGE: (state, toastMessage) =&gt; (state.toastMessages = [...state.toastMessages, toastMessage]),
 },
 actions: {
 myActionThatDoSomething({commit}, params) {
 // Do something
 commit('ADD_TOAST_MESSAGE', "Something happened");
 }
 }
});
</code></pre>

blocks|key|1835694|text|使用@eroak的想法，我为vue-甜警报2实现了同样的功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1835695|我还为我的甜警报烤面包机创建了一个商店，然后我正在观看一个名为ticks的属性，每当烤面包机的状态更新时，该属性就会被更新。我使用的是ticks，因为在我的状态中只有一条消息，而当操作被触发时，ticks只是时间戳。|style|BOLD|CODE|1835696|您可以在这里找到完整的演示：https://github.com/Uraharadono/CallbackFromVuexAction|1835697|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/avil13/vue-sweetalert2|1|https://github.com/Uraharadono/CallbackFromVuexAction^0|E|8|0|0|5|7|V|5|1V|5|2P|5|0|E|1H|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]|$A|11|B|12|F|H]|$A|13|B|14|F|H]|$A|15|B|16|F|H]]|9|@]|C|$]]|$1|I|3|J|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|K|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

Using @eroak idea, I have implemented this same thing for <a href="https://github.com/avil13/vue-sweetalert2" rel="nofollow noreferrer">vue-sweetalert2</a>.
I have also created a store for my Sweet Alert Toaster, then I am watching a property called <code>ticks</code> that is updated whenever state of the toaster is updated.
I am using <code>ticks</code> as I only have one message in my state, and <code>ticks</code> just timestamp when action was triggered.
You can find whole demo here: <a href="https://github.com/Uraharadono/CallbackFromVuexAction" rel="nofollow noreferrer">https://github.com/Uraharadono/CallbackFromVuexAction</a>

Did anyone tried to use boostrap-vue in combination with vuex?
I'm having hard time calling modals and toast from vuex actions.

Obviously I can not use <code>this</code> from vuex store, therefore I can't use:

<pre><code>this.$bvModal.show('modalId');
</code></pre>

I also tried calling modal like this

<pre><code>import Vue from 'vue';

Vue.prototype.$bvModal.show('transaction');
</code></pre>

But console gives me following warning:

BootstrapVue warn]: '$bvModal' must be accessed from a Vue instance 'this' context

Any idea how I can call modals and toasts from vuex actions directly?

How to call bootstrap-vue modals and toasts from vuex actions?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有没有人试图结合使用boostrap和vuex？我很难打电话给情妇，也很难从性行为中得到吐司。显然，我不能使用来自vuex商店的this，因此我不能使用：this.$bvModal.show('modalId');我也试过像这样打电话import Vue from 'vue';Vue.prototype.$bvModa...

问如何从vuex动作中调用引导-vue模式和祝酒词？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从vuex动作中调用引导-vue模式和祝酒词？EN