Vuex
Por que preciso disso?
Componentes
Estamos na era dos componentes
Componentes
Algumas características
- Pequenas unidades
- Altamente especializados
- Facilmente testáveis
- Permitem composição
- Fazem com que você DRY
- Encapsulam estrutura, visual e comportamento
Componentes
E principalmente...
TROCAM INFORMAÇÃO ENTRE SI
Componentes
E principalmente...
TROCAM INFORMAÇÃO ENTRE SI
E aqui é que mora a armadilha!
Componentes
Estrutura de um típico componente Vue.js
<script>
export default {
// COMPORTAMENTO
}
</script>
<template>
<div>ESTRUTURA</div>
</template>
<style>
/* VISUAL */
</style>
Componentes
O estado local de um componente
<script>
export default {
data () {
return {
list: [1, 2, 3]
}
}
}
</script>
Componentes
State
{
list: ['Eletrônicos', 'Utilidades Domésticas', 'Produtos de Limpeza'],
label: 'Categoria selecionada',
filters: {
date: '08/07/2017',
region: 'SP',
acknowledgement: false
}
}
Reatividade
Shared State
Componente 1
{
// chamada AJAX abastece o array abaixo...
list: ['Eletrônicos', 'Utilidades Domésticas', 'Produtos de Limpeza']
}
Componente 6
Componente 37
Shared State
O que fazer para compartilhar este pedaço do state ?
- Duplicar a informação?
- NÃO!!!
- Enviar a informação disparando um evento?
- TALVEZ!
- Manter um state isolado de componentes, no nível da aplicação e disponível para qualquer componente que tenha interesse na informação?
- YES!!!!
Vuex
"Um state isolado de componentes,
no nível da aplicação e disponível
para qualquer componente que tenha interesse
na informação."
colocando de forma simples:
Vuex
- Um pattern e uma library
- Desenvolvido pelo core team Vue
- No fundo apenas um objeto Javascript
- Disponível para todos os componentes
- Alterações automaticamente propagadas
- Por isso Single Source of Truth
Vuex
Vuex
-
Vuex possui uma forma específica de lidar com a informação
-
Você precisará aprender o jeito Vuex
- O desenvolvimento ficará mais burocrático
Instalação e Configuração
Instale com NPM ou Yarn
npm install vuex --save
// ou
yarn add vuex
Instalação e Configuração
Configure no main.js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
categories: [1, 2, 3]
}
})
new Vue({
el: '#app',
store, // alias para store: store
render: h => h(App)
})
Instalação e Configuração
<script>
export default {
computed: {
categories () {
return this.$store.state.categories
}
}
}
</script>
Vuex Store
- Contém os dados: State
-
Provê métodos para gerenciar o State:
Mutations, Actions e Getters - Pode ser modularizada: Modules
Um resumo
Peculiaridades
- Apenas a Store pode modificar o State
- Fluxo unidirecional de informação
- Store provê todos os métodos necessários para gerenciar o State
Peculiaridades
Apenas a Store pode modificar o state
<script>
export default {
computed: {
categories () {
return this.$store.state.categories
}
},
methods: {
add (category) {
this.$store.state.categories.push(category) // < isso NÃO pode!
}
}
}
</script>
ERRADO
Peculiaridades
Apenas a Store pode modificar o State
<script>
export default {
computed: {
categories () {
return this.$store.state.categories
}
},
methods: {
add (category) {
this.$store.dispatch('add_category', category)
}
}
}
</script>
CERTO
Apenas a Store pode modificar o State
add_category é um método de Store cujo tipo, na nomenclatura do pattern Vuex, é Action.
Actions são responsáveis por executar métodos do tipo Mutation e apenas uma Mutation pode alterar o State.
Actions e Mutations
const store = new Vuex.Store({
state: {
categories: [1, 2, 3]
},
mutations: {
ADD_CATEGORY (state, obj) { // < variavel state injetada pelo Vuex
state.categories.push(obj)
}
},
actions: {
add_category ({commit}, obj) {
commit('ADD_CATEGORY', obj)
}
}
})
new Vue({
el: '#app',
store, // alias para store: store
render: h => h(App)
})
Fluxo Unidirecional
Complicado?
Poderia ser pior!
React + Redux
Demo
Finalizando
- Sou obrigado a usar Vuex?
- Como saber quando preciso?
- Terei que armazenar todos os dados na Store Vuex?
Front in Sampa 2017
By Fabio Vedovelli
Front in Sampa 2017
- 2,011