Vuex, государственный менеджер Vue.js

Vuex - это официальная библиотека управления состоянием для Vue.js. В этом уроке я собираюсь объяснить его основное использование.

Введение в Vuex

Vuex - это официальная библиотека управления состоянием для Vue.js.

Его задача - обмениваться данными между компонентами вашего приложения.

Компоненты в Vue.js из коробки могут обмениваться данными, используя

  • реквизит, чтобы передать состояние дочерним компонентам от родительского
  • События, чтобы изменить состояние родительского компонента из дочернего или использовать корневой компонент в качестве шины событий

Иногда все становится сложнее, чем позволяют эти простые варианты.

В этом случае хороший вариант - централизовать состояние в одном магазине. Это то, что делает Vuex.

Почему вам следует использовать Vuex

Vuex - не единственный вариант управления состоянием, который вы можете использовать во Vue (вы можете использоватьReduxтоже), но его главным преимуществом является то, что он официальный, а его интеграция с Vue.js делает его ярким.

С React у вас возникнут проблемы с выбором одной из множества доступных библиотек, поскольку экосистема огромна и не имеет фактического стандарта. В последнее время Redux был самым популярным выбором, за ним следовал MobX. С Vue я бы даже сказал, что вам не нужно искать что-либо, кроме Vuex, особенно когда вы только начинаете.

Vuex позаимствовал многие свои идеи из экосистемы React, поскольку это шаблон Flux, популяризированный Redux.

Если вы уже знаете Flux или Redux, Vuex будет вам хорошо знаком. Если нет, не беда - я объясню каждую концепцию с нуля.

Компоненты в приложении Vue могут иметь собственное состояние. Например, поле ввода будет хранить введенные в него данные локально. Это нормально, и компоненты могут иметь локальное состояние даже при использовании Vuex.

Вы знаете, что вам нужно что-то вроде Vuex, когда вы начинаете много работать, чтобы передать часть состояния.

В этом случае Vuex предоставляет центральное хранилище репозитория для состояния, и вы изменяете состояние, запрашивая это у хранилища.

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

Использование Vuex внесет некоторую сложность в приложение, так как все должно быть настроено определенным образом для правильной работы, но если это помогает решить неорганизованную передачу реквизитов и систему событий, которая может превратиться в беспорядок спагетти, если будет слишком сложным, тогда это хороший выбор.

Давайте начнем

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

Примеры, которые я использую, будут помещены в CodeSandbox, что является отличным сервисом, в котором есть образец интерфейса командной строки Vue, готовый к работе.https://codesandbox.io/s/vue. Я рекомендую использовать его, чтобы поиграть.

CodeSandbox

Когда вы окажетесь там, нажмите кнопкуДобавить зависимостькнопку, введите «vuex» и щелкните по ней.

Теперь Vuex будет указан в зависимостях проекта.

Чтобы установить Vuex локально, вы можете запуститьnpm install vuexили жеyarn add vuexвнутри папки проекта.

Создайте магазин Vuex

Теперь мы готовы создать наш магазин Vuex.

Этот файл можно положить куда угодно. Обычно предлагается поместить его вsrc/store/store.jsфайл, так что мы сделаем это.

В этом файле мы инициализируем Vuex и говорим Vue использовать его:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({})

Vuex store

Мы экспортируем объект хранилища Vuex, который создаем с помощьюVuex.Store()API.

Пример использования магазина

Теперь, когда у нас есть скелет, давайте придумаем хороший вариант использования Vuex, чтобы я мог представить его концепции.

Например, у меня есть 2 родственных компонента: один с полем ввода, а другой печатает содержимое этого поля ввода.

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

Представляем необходимые нам новые компоненты

Я удаляю компонент HelloWorld и добавляю компонент Form и компонент Display.

<template>
	<div>
		<label for="flavor">Favorite ice cream flavor?</label>
		<input name="flavor">
	</div>
</template>
<template>
	<div>
		<p>You chose ???</p>
	</div>
</template>

Добавление этих компонентов в приложение

Мы добавляем их в код App.vue вместо компонента HelloWorld:

<template>
  <div id="app">
    <Form/>
    <Display/>
  </div>
</template>

<script> import Form from ‘./components/Form’ import Display from ‘./components/Display’

export default { name: ‘App’, components: { Form, Display } } </script>

Добавить состояние в магазин

Итак, с этим мы вернемся к файлу store.js и добавим в хранилище свойство с именемstate, который является объектом, содержащимflavorсвойство. Изначально это пустая строка.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ } })

Мы обновим его, когда пользователь введет в поле ввода.

Добавить мутацию

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

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ }, mutations: { change(state, flavor) { state.flavor = flavor } } })

Добавить геттер для ссылки на свойство состояния

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

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ }, mutations: { change(state, flavor) { state.flavor = flavor } }, getters: { flavor: state => state.flavor } })

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

Добавление магазина Vuex в приложение

Теперь магазин готов к использованию. Мы возвращаемся к коду нашего приложения, и в файле main.js нам нужно импортировать состояние и сделать его доступным в нашем приложении Vue.

Мы добавляем

import { store } from './store/store'

и добавляем в приложение Vue:

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

Как только мы добавим это, поскольку это основной компонент Vue,storeпеременная внутри каждого компонента Vue будет указывать на хранилище Vuex.

Обновление состояния действия пользователя с помощью фиксации

Давайте обновим состояние, когда пользователь что-то набирает.

Мы делаем это с помощьюstore.commit()API.

Но сначала давайте создадим метод, который вызывается при изменении входного содержимого. Мы используем@inputскорее, чем@changeпотому что последний срабатывает только тогда, когда фокус перемещается от поля ввода, а@inputвызывается при каждом нажатии клавиши.

<template>
  <div>
    <label for="flavor">Favorite ice cream flavor?</label>
    <input @input="changed" name="flavor">
  </div>
</template>

<script> export default { methods: { changed: function(event) { alert(event.target.value) } } } </script>

Теперь, когда у нас есть значение аромата, мы используем Vuex API:

<script>
export default {
  methods: {
    changed: function(event) {
      this.$store.commit('change', event.target.value)
    }
  }
}
</script>

посмотрим, как мы ссылаемся на магазин, используяthis.$store? Это благодаря включению объекта store в инициализацию основного компонента Vue.

Вcommit()принимает имя мутации (мы использовалиchangeв хранилище Vuex) и полезную нагрузку, которая будет передана мутации в качестве второго параметра ее функции обратного вызова.

Используйте геттер для печати значения состояния

Теперь нам нужно сослаться на получатель этого значения в шаблоне отображения, используя$store.getters.flavor.thisможно удалить, потому что мы находимся в шаблоне, иthisнеявно.

<template>
  <div>
    <p>You chose {{ $store.getters.flavor }}</p>
  </div>
</template>

Подведение итогов

Вот и все, что вам нужно знать о Vuex!

Полный рабочий исходный код доступен по адресуhttps://codesandbox.io/s/zq7k7nkzkm

В этой головоломке по-прежнему не хватает многих концепций:

  • действия
  • модули
  • помощники
  • плагины

но у вас есть основы, чтобы прочитать о них в официальной документации.

Удачного кодирования!

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: