我正在创建一个小型 Vue 插件,允许用户从任何组件内添加“页面通知”。我已经成功地实现了类似的东西:
this.$notifications.add("a message");
它有效!但我必须注册我的插件工作所需的突变和操作,作为为我的应用程序设置商店其余部分的文件的一部分:
export default new Vuex.Store({...})
有没有办法从我的插件中向我的商店添加操作和突变?目前看起来是这样的:
import vuex from './../store';
const MyPlugin = {
install(Vue, options) {
// 4. add an instance method
Vue.prototype.$notifications =
{
notificationTypes: {
0: "warning",
1: "info"
},
add: function (options) {
let id = "page-notification-" + (vuex.state.pageNotificationsCreated + 1);
let message = options.message || options || "no message";
let notificationType = this.notificationTypes[0];
if(options.notificationType && Number.isInteger(options.notificationType)){
// Map int to string type
notificationType = this.notificationTypes[options.notificationType] || notificationType;
}else{
// Or use string we were provided ;)
notificationType = options.notificationType;
}
let notification = { id: id, message: message, notificationType: notificationType };
vuex.dispatch('addNotification', notification);
}
}
}
};
export default MyPlugin;
任何和所有的帮助表示赞赏!
将 vuex store 导入到你的插件中;使其难以重复使用。您应该将依赖项放入插件选项中。
const MyPlugin = {
install(vue, { store }){ // now your plugin depend on store
if (!store) {
throw new Error("Please provide vuex store.");
}
// register your own vuex module
store.registerModule({states, mutations, actions });
// hook vue
}
}
现在你的插件与 vuex 完全解耦了;易于在其他应用程序中重用。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)