如何从vuex动作中调用引导-vue模式和祝酒词？
如何从vuex动作中调用引导-vue模式和祝酒词？
提问于 2019-08-11 07:12:24
有没有人试图结合使用boostrap和vuex？我很难打电话给情妇，也很难从性行为中得到吐司。
显然，我不能使用来自vuex商店的this，因此我不能使用：
this.$bvModal.show('modalId');我也试过像这样打电话
import Vue from 'vue';
Vue.prototype.$bvModal.show('transaction');但是控制台给了我以下警告：
BootstrapVue警告]：必须从Vue实例'this‘上下文访问'$bvModal’
你知道我怎么才能直接把情态和祝酒词叫做性感动作吗？
回答 5
Stack Overflow用户
发布于 2019-08-11 07:19:30
试着打电话给this._vm.$bvModal.show('modalId');。参考文献。
Stack Overflow用户
发布于 2020-05-02 16:13:53
我认为更好的方法是防止从商店中处理UI。因此，您可以添加存储属性并监视组件中的更改。
在下面的示例中，我在state属性中添加了一个数组state，并添加了一个ADD_TOAST_MESSAGE突变以添加一些toastMessage。然后，您可以从另一个突变或操作中提交一个ADD_TOAST_MESSAGE突变。
在顶层组件(App.vue)中，您可以监视toastMessages状态属性的更改，并显示被推送的最后一项。
App.vue
<script>
export default {
name: "App",
created() {
this.$store.watch(
state => state.toastMessages,
toastMessages => {
this.$bvToast.toast(this.toastMessages.slice(-1)[0]);
}
);
}
}
</script>store.js
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");
}
}
});Stack Overflow用户
发布于 2020-04-21 13:25:11
在这里找到了一个解决方案：https://github.com/vuejs/vuex/issues/1399#issuecomment-491553564
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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57448027
复制相关文章
相似问题
腾讯云开发者
