O que é vuex e para que ele serve

Quando nossa aplicação cresce fica difícil manusear o estado de vários componentes e interações entre eles. Para resolver este problema, o Vue oferece o vuex: Uma biblioteca de gerenciamento de estado inspirada no Flux, Redux e na arquitetura Elm. Falarei um pouco sobre a mesma e os problemas que ele resolve.

Transcript

1. Talk O que é vuex e para que ele serve { Christian Barros Fabião do Nascimento }
2. Christian Nascimento Full-stack Developer | Softplan @cnascimentobr github.com/cbfn cnascimentobr@gmail.com
3. Era uma vez...
5. $emit, $dispatch, $brodacast, v-on, var bus = new Vue()
6. • Objeto global (Store) • Centralizador dos estados (States) dos componentes • Componentes pudessem pegá-los (Getters)
7. VUEX state management pattern + library for Vue.js applications https://vuex.vuejs.org/en/ https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=pt-BR
8. • Dispatch : Executa uma ação dentro de um componente origem. • Store: Armazenamento centralizado do estado (state) dos componentes e as mudanças (mutations) • Getters: Recebe dados do estado pelo componente destino. • Mutations: A única maneira de mudar os estado (state) nas stores. Elementos essenciais
9. Exemplo real
10. # Rails 5.1+ rails new myapp --webpack=vue <template> <table class=”table”> <thead> …. </thead> <tbody> <tr v-for="person in people"> <td>{{person.name}}</td> <td>{{person.gender}}</td> <td>{{person.height}}</td> </tr> </tbody> </table> </template> <script> export default { props: { people: Array } } </script>
11. # Rails 5.1+ rails new myapp --webpack=vue import Vue from 'vue' const req = function (path) { return Vue.http.get(`http://swapi.co/api/${path}`) } export const getPeople = ({ dispatch }) => { req('people').then((res) => { dispatch('GET_PEOPLE', res.data.results) }) }
12. # Rails 5.1+ rails new myapp --webpack=vue // Estrutura do estado const state = { list: [] } // Possíveis mutações do estado const mutations = { GET_PEOPLE (state, people) { // Coloca dentro do state state.list = people } } // Exporta tudo export default { state, mutations }
13. # Rails 5.1+ rails new myapp --webpack=vue import Vue from 'vue' import App from './App' import VueResource from 'vue-resource' import store from './vuex/store' Vue.use(VueResource) new Vue({ store, el: 'body', components: { App } })
14. # Rails 5.1+ rails new myapp --webpack=vue import Vue from 'vue' import Vuex from 'vuex' import people from './modules/people' Vue.use(Vuex) export default new Vuex.Store({ modules: { people } })
15. # Rails 5.1+ rails new myapp --webpack=vue <template> <people :people="people" v-show="!loading"></people> <div v-show="loading" class="loader">Loading...</div> </template> <script> import People from './components/People' import { getPeople } from './vuex/actions' export default { vuex: { getters: { people: ({ people }) => people.list, loading: ({ people }) => people.list.length === 0 }, actions: { getPeople } }, created () { this.getPeople() }, components: { People } } </script>
16. FIM Dúvidas?