Vuex

Ссылки

https://vuex.vuejs.org/ru/guide/ - официальная документация

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

Минусы

Большое время требуемое на создание хранилища. Взаимодействие данных в Vue происходит не напрямую а через специальные функции Actions и Mutations, что в свою очередь значит что для сохранения 1 небольшого списка может потребоваться написать 10 строк кода - что не очень удобно.

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

Плюсы

Благодаря единому хранилищу, при смене действующего API достаточно изменить только store - не пмрикасаясь к остальному приложению.

Установка

npm install vuex -S

Создание хранилища

Для начала необходимо подключить Vuex к самому Vue.

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

Vue.use(Vuex)

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

const store = new Vuex.Store({

});

Самым главным свойством store - будет состояние state. Именно в нём и будут храниться все наши данные

const store = new Vuex.Store({
	state: {
		results: []
	}
});

Загрузка данных в приложение

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

В отличии от обычных функциий, функции в state принимают специальный объект

{state, dispatch , commit}

где

state - ссылка на хранилище
dispatch - предназначен для асинхронного запуска самих action, т.е. загрузка данных никак не будет влиять на осталбное приложение.
commit - используется для запуска мутаций, функции через которую во Vuex происходит любое изменение данных в методе state.

actions: {
	search({ commit }, query) {
		const url = 'https://ru.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=' + query

		jsonp(url, (error, response) => {
			if(error) {
				throw error
			}

			const results = response.query.search

			commit('set', { type: 'results', items: results })
		})
	}
}

Мутаторы

Передача данных из actions происходит при помощи мутатора set, который описывается в секции mutations. Этот мутатор позволяет сохранять данные в state.

mutations: {
	set(state, { type, items }) {
		state[type] = items
	}
}

Геттеры

Получать данные из хранилища можно напрямую или используя геттеры. Геттеры нужны для того чтобы изменить данные перед получением не затрагивая оригинал.

getters: {
	results(state) {
		let results = state.results

		return results.map(item => {
			item.url = 'https://ru.wikipedia.org/wiki/' + item.title
			return item
		})
	}
}

В конце создания хранилища его необходимо экспортировать

export default store

Для использования хранилища в компоненте его нужно импортировать

import store from '../store/index.js'

Потом создать сам метод который будет его использовать

export default {
	data() {
		return {
			query: ''
		}
	},
	methods: {
		search() {
			store.dispatch('search', this.query)
		}
	}
}

Созданный метод поиска можно вызывать из шаблона

<template>
  <div class="Search">
    <input type="text" class="Search__input" v-model="query">
    <button class="Search__button" @click="search()">Найти</button>
  </div>
</template>

Глобальное использование store

Чтобы не импортировать хранилище в каждый компонент - его можно подключить глобально в главном файле.

import store from './store'

new Vue({
  el: '#app',
  render: h => h(App),
  store
})

А потом в компонентах использующих обычный store заменить на глобальный

this.$store.dispatch('search', this.query)

Vue-router

Vue Axios