作为 Vue 插件的一部分将 Mutations 添加到 Vuex store

Question

我正在创建一个小型 Vue 插件，允许用户从任何组件中添加 "page notification"。我已经成功地实施了类似的东西：

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;

感谢任何帮助！

Answer 1

将 vuex 商店导入您的插件；使其难以重用。你应该把依赖放在插件选项中。

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 完全解耦了；易于在其他应用程序中重用。

作为 Vue 插件的一部分将 Mutations 添加到 Vuex store

Adding Mutations to Vuex store as part of Vue Plugin

javascript

vue.js

vuejs2

vuex