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

В нашем последнем уроке мы построили роутер для вашего приложения Vue.js. У каждого из маршрутов есть свои составляющие. Протокол заключается в том, чтобы они были как можно слабее связанными. Данные, необходимые для совместного использования, передаются между компонентами через интерфейсы. А теперь вернемся к нашему примеру с тележкой для покупок. Это не то, что вы хотели бы передавать между компонентами при каждом переходе. И наоборот, мы не хотим, чтобы в итоге глобально хранился беспорядок.

Войдите в государственное управление. Библиотека управления состоянием может централизованно хранить данные в нашем приложении, обеспечивая доступ к ним через компоненты и маршруты. Он управляет изменениями этого состояния посредством мутаций и действий, обеспечивая контролируемое изменение всех данных. Давайте возьмем наше приложение из нашего последнего урока и добавим библиотеку управления состоянием. Здесь мы сосредоточимся на Vuex, потому что он разработан специально для Vue. Начнем с установки Vuex в нашем проекте. Выполните следующую команду из каталога приложений:

npm install vuex --save

Теперь создайте новую папку в каталоге src вашего приложения. Назовем его store и добавим в файл store.js. Здесь мы храним все наши функции управления состоянием. Если вы следовали инструкциям с последнего урока, ваша структура каталогов должна выглядеть примерно так:

Store.js будет содержать наши:

  • состояние: единый объект для хранения данных, которые будут использоваться во всем приложении
  • геттеры: вычисляемые свойства на основе данных в магазине
  • мутации: методы, используемые для изменения вашего состояния

Он также содержит действия и модули. Подробнее об этом позже. А пока давайте посмотрим на наш store.js:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
    state: {
      cartItems: 0
    },
    getters: {
      getItems: state => {
        return state.cartItems;
      }
    },
    mutations: {
      increment (state){
        state.cartItems++
      }
    }
})

Здесь мы создали состояние со значением cartItems, представляющим, сколько товаров в настоящее время находится в корзине покупок. У нас есть геттер для возврата количества элементов в тележке, и, наконец, у нас есть мутация для увеличения количества элементов в тележке. Следующим шагом будет импорт нашего магазина в наше приложение Vue и включение его в наш экземпляр Vue. Обновите свой main.js из каталога src:

// other import statements
import { store } from './store/store'
...
new Vue({
  el: '#app',
  router,
  store: store,
  components: { App },
  template: '<App/>'
})

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

export default {
  name: 'Test',
  data () {
    return {
      name: 'John Smith',
      city: 'Charlotte, NC'
    }
  },
  computed: {
    getCounter() {
      return this.$store.getters.getCounter;
    },
  },
  created: function(){
    this.$store.commit('increment');
  }
}

Обратите внимание на вычисленные и созданные методы. Чтобы получить доступ к магазину, который мы создали на предыдущих этапах, нам нужно сослаться на:

this.$store

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

Теперь, когда это сделано, мы можем ссылаться на эти функции в шаблоне точно так же, как и в нашем предыдущем уроке:

<template>
  <div>
    ...
    <p> Welcome {{name}} from {{city}} </p>
    <p> Number of items in cart are: {{getCounter}} </p>
  </div>
</template>

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

Возможность управлять состоянием компонентов в вашем приложении имеет решающее значение для создания масштабируемого кода. Надеюсь, это послужит вам основанием для понимания того, как управление состоянием во Vue, и даст вам хорошее начало. Как всегда, я приветствую вопросы / отзывы в комментариях и в твиттере @ignoreinution.

использованная литература



Введение · Vuex
Изменить описание vuex.vuejs.org





Экземпляр Vue - Vue.js
Каждое приложение Vue начинается с создания нового экземпляра Vue с функцией Vue: хотя и не строго связан… vuejs.org



✉️ Подпишитесь на рассылку еженедельно Email Blast от CodeBurst 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .