Плагины

Плагины не являются специфическими для Vue.js, вы обычно найдете их в широком спектре программного обеспечения, а плагин указывает, что предоставляется интерфейс для обеспечения расширяемости.

Плагины добавляют функциональность глобального уровня в Vue. Не существует строго определенной области действия для плагина - обычно есть несколько типов плагинов:

1. Есть некоторые, чтобы добавить некоторые глобальные методы или свойства. например, vue-custom-element
2. Другие добавляют один или несколько глобальных ресурсов: директивы / фильтры / переходы и т. Д., Например, vue-touch
3. Есть некоторые, чтобы добавить некоторые опции компонента по глобальному mixin. например, vue-router
4. Некоторые плагины добавляют некоторые методы экземпляра Vue, присоединяя их к Vue.prototype.
5. Есть библиотеки, которые предоставляют собственный API, в то же время внедряя некоторую комбинацию из вышеперечисленного. например, vue-router

Используя плагин

Плагины используются путем вызова глобального метода Vue.use (). Это нужно сделать, прежде чем мы запустим наше приложение, вызвав new Vue ():

// calls `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
  //... options
})

Мы можем при желании передать несколько вариантов:

Vue.use(MyPlugin, { someOption: true })

Vue.use автоматически запрещает нам использовать один и тот же плагин более одного раза, поэтому вызов его несколько раз на одном и том же плагине приведет только к установке плагина.

Некоторые официальные плагины, такие как vue-router, предоставляемые Vue.js, автоматически вызывают Vue.use (), если Vue доступен как глобальная переменная. Однако в модульной среде, такой как CommonJS, нам всегда нужно явно вызывать Vue.use ():

// When we are using CommonJS via Browserify or Webpack 
var Vue = require('vue')
var VueRouter = require('vue-router')
// You should not forget to call this
Vue.use(VueRouter)

Другой официальный плагин - Vuex, он используется для управления состоянием, он служит централизованным хранилищем для всех компонентов в приложении. Обычно это необходимо, если вам нужно создать большое приложение с высоким уровнем обслуживания.

Вот пример управления состоянием с использованием Vuex:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
  strict: process.env.NODE_ENV !=='production',
  state:{
    count :0,
    carts:[]
  },
  // getters for manipulation
  getters:{
      countCarts: state => {
        return state.carts.length
      }
  },
  mutations: {
    ADD_CART:(state, item) => {
    state.carts.push(item)
  },
  REMOVE_CART:(state, item)=> {
    state.carts.splice(item,1)
  }
},
actions: {
        removeCart: (context, items)=> {
          context.commit("REMOVE_CART", item)
        }
}
});

Приведенный выше фрагмент эффективно отслеживает состояние массива корзины на веб-сайте электронной коммерции.

Существует также vee-validate, который используется для проверки формы при создании бизнес-приложений, в таких случаях проверка формы может стать.

Написание плагина

Плагин в Vue.js должен предоставлять метод установки. Этот метод будет вызываться с конструктором Vue в качестве первого аргумента вместе с возможными параметрами:

MyPlugin.install = function (Vue, options) {
  // 1. adding global method or property
  Vue.myGlobalMethod = function () {
    // some logic ...
  }
  // 2. adding a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // some logic ...
    }
    ...
  })
  // 3. injecting some component options
  Vue.mixin({
    created: function () {
      // some logic ...
    }
    ...
  })
  // 4. adding an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // some logic ...
  }
}