Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

В этой статье мы рассмотрим несколько советов и приемов, которые следует учитывать при разработке приложений Vue, чтобы сэкономить время и снизить вероятность появления ошибок.

Используйте Vuex для управления состоянием в масштабе всего приложения

Vuex - отличная библиотека, позволяющая управлять состоянием всего приложения на Vue.js. Это самое простое решение для управления состоянием в приложениях Vue.

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

Например, мы можем использовать его следующим образом:

index.js

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload;
    }
  },
  getters: {
    count: state => state.count
  }
});
Vue.component("app-button", {
  template: "<button @click='increment(2)'>Increment</button>",
  methods: {
    ...Vuex.mapMutations(["increment"])
  }
});
Vue.component("app-counter", {
  template: "<p>{{count}}</p>",
  computed: {
    ...Vuex.mapGetters(["count"])
  }
});
new Vue({
  el: "#app",
  store
});

index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <div id="app">
      <app-button></app-button>
      <app-counter></app-counter>
    </div>
    <script src="index.js"></script>
  </body>
</html>

В приведенном выше коде app-button и app-counter являются братьями и сестрами, поэтому передавать данные между ними без посторонней помощи сложно. Следовательно, мы можем использовать Vuex для создания хранилища, в котором хранится состояние count, к которому могут получить доступ оба компонента.

Мы просто передаем store в наш основной экземпляр Vue, а затем можем сопоставить мутации get с mapMutations в методах с методом mapMutations.

Точно так же мы вызываем метод mapGetters, чтобы сопоставить геттеры с вычисляемыми свойствами.

В свойстве mutations у нас есть метод increment, который принимает параметр payload для обновления состояния count.

getters имеет count, который возвращает состояние count.

В компоненте app-button у нас есть обработчик кликов с методом increment, полученным из метода mapMutations, который вызывает мутацию increment с payload of 2.

Затем state.count обновляется на 2 каждый раз, когда мы нажимаем кнопку затем. Таким образом, мы видим, что кнопка обновляет count на экране.

Понимание того, как работают экземпляры компонентов Vue

Мы должны знать, как работает экземпляр Vue, чтобы не создавать медленный и ошибочный код.

Например, мы должны знать, что свойство data должно иметь функцию в качестве значения, потому что мы не хотим передавать данные другим экземплярам.

Кроме того, сохраняется память, потому что, если свойство data является функцией, Vue не нужно будет полностью создавать экземпляр всего компонента. Все остальное, например методы, определения вычисляемых свойств и перехватчики жизненного цикла, создаются и сохраняются только один раз.

Мы должны знать, что нам нужен this для доступа к свойствам, возвращаемым data, потому что мы получаем доступ к данным экземпляра компонента. Объект, который мы передаем в Vue.component или экспортируем из однофайлового компонента, предназначен только для определения компонента.

Правильно преобразовать компонент Vue

Мы должны правильно перерисовать компоненты Vue. Лучший способ - установить свойство key для компонента, чтобы при обновлении его содержимого Vue мог идентифицировать компонент, который обновил, и соответствующим образом повторно отрендерить его.

Например, когда мы используем v-for, мы должны установить уникальное значение свойства key следующим образом:

index.js :

new Vue({
  el: "#app",
  data: {
    people: [
      { id: 1, name: "John" },
      { id: 2, name: "Sarah" },
      { id: 3, name: "Jane" }
    ]
  },
  methods: {
    remove(index) {
      this.people.splice(index, 1);
    }
  }
});

index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <div id="app">
      <p v-for="(p, index)  in people" :key="p.id">
        {{p.name}} - {{index}} <button @click="remove(index)">Delete</button>
      </p>
    </div>
    <script src="index.js"></script>
  </body>
</html>

В приведенном выше коде у нас есть свойство key, для которого установлено значение p.id. Он уникален, поэтому может использовать его для определения нужного компонента для удаления и повторной визуализации, когда мы нажимаем кнопку «Удалить».

Заключение

Vuex отлично подходит для управления состоянием всего приложения. Кроме того, мы должны понимать, как работают экземпляры Vue, чтобы не допустить ошибок, таких как установка data для объекта в компоненте. Наконец, мы должны добавить key props ко всему, что отрисовывается с v-for, чтобы повторная отрисовка выполнялась правильно, когда мы манипулируем элементами.

Примечание команды Plain English

Вы знали, что у нас четыре публикации? Проявите немного любви, предложив им следующие слова: JavaScript на простом английском, AI на простом английском, UX на простом английском , Python на простом английском - спасибо и продолжайте учиться!

Кроме того, мы всегда заинтересованы в продвижении хорошего контента. Если у вас есть статья, которую вы хотели бы отправить в какую-либо из наших публикаций, отправьте электронное письмо на адрес [email protected] с вашим именем пользователя Medium и тем, о чем вы хотите написать, и мы вернуться к вам!