如何从vuex操作中调用core-ui modals和toast？

Question

我正在使用core ui framework来构建一个应用程序。

找不到如何从vuex调用toast。

我试过了。

this.$Toast.show('Toast Message');

Answer 1

this.$Toast被添加到Vue原型中，因此在您的任何一个组件中进行了定义。

Vuex与你的任何一个组件分离，这样你的应用程序的状态就不会直接依赖于任何特定的组件。在某种意义上，根据定义，Vuex意味着与模板层断开连接。这是一个抽象概念。

至少有两种方法可以将Vuex连接到模板：

第一个选项：在App.vue中(或在main.js中)创建一个watch。此watch将对状态属性的任何更改做出反应，保存要显示的消息。简而言之：

• 创建一个保存空消息的状态属性
• 当您想要显示一个吐司时，将消息提交到该状态属性
• 然后只要状态属性值发生更改，观察器就会调用this.$Toast.show(value)

假设您使用toastMessage，下面是放置在main.js中的watch的样子

new Vue({
  // ... your current stuff...
  computed: {
    ...mapState('toastMessage')
  },
  watch: {
    toastMessage(val) {
      if (val) {
        this.$Toast.show(val);
      }
    }
  }
});

此时，在任何组件中，this.$Toast.show('some message')都等同于this.$store.commit('showToast', 'some message')。很明显，你需要一个这样的变化：

mutations: {
  showToast(state, value) {
    state.toastMessage = value;
  }
}

Second option (以及我如何做到这一点)：

在main.(js|ts)中的

• ，其中有new Vue({ ...stuff })，将Vue实例放在一个const中(我将其命名为Instance)，并从中导出$Toast。然后，您可以将其导入到存储中并直接调用它:例如：

// in main.js:
const Instance = new Vue({ /* ...your current stuff */ });
export const { $Toast } = Instance

// in store:
import { $Toast } from './path/to/main.js'

// in any action/mutation:
$Toast.show('Toast Message');