Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introducing Vuex in your project

How to add and use Vuex in an existing project without going crazy, also adding tests, which never hurts.

  • Be the first to comment

  • Be the first to like this

Introducing Vuex in your project

  1. 1. Introducing Vuex in your projects How to add and use Vuex in existing projects, with an eye for testing.   - Denny Biasiolli -
  2. 2. WHO AM I Denny Biasiolli Freelance Full Stack Developer Front End Developer UX/ UI Fingerprint Supervision Ltd Savigliano (CN) - Italy Volunteer in a retirement home, performing recreational activities @dennybiasiolli denny.biasiolli@gmail.com dennybiasiolli.com
  3. 3. EXAMPLE APP
  4. 4. EXAMPLE APP Structure
  5. 5. EXAMPLE APP Main component, data() export default { name: 'Home', data() { // component's state return { availableNumbers: [...Array(90).keys()] .map((i) => i + 1), extractedNumbers: [], }; }, // ... };
  6. 6. EXAMPLE APP Main component, computed export default { // ... computed: { // component's getters ascendingExtractedNumbers() { return [...this.extractedNumbers].sort((a, b) => a - b); }, }, // ... };
  7. 7. EXAMPLE APP Main component, methods export default { // ... methods: { // component's actions/mutations handleExtract() { const index = Math.floor( Math.random() * this.availableNumbers.length); const extracted = this.availableNumbers .splice(index, 1); this.extractedNumbers = this.extractedNumbers .concat(extracted); }, }, };
  8. 8. EXAMPLE APP Main component template <button @click="handleExtract">Extract</button> <h1> Extracted: {{ extractedNumbers[extractedNumbers.length - 1] }} </h1> <DisplayNumbers title="Available numbers" :numbers="availableNumbers" /> <DisplayNumbers title="Extracted numbers" :numbers="ascendingExtractedNumbers" />
  9. 9. EXAMPLE APP DisplayNumbers component <v-card elevation="2"> <v-card-title>{{ title }}</v-card-title> <v-card-text> <v-chip v-for="n of numbers" :key="n" class="ma-1"> {{ n }} </v-chip> </v-card-text> </v-card> export default { name: 'DisplayNumbers', props: { title: String, numbers: Array, }, };
  10. 10. COMPONENT TESTS DisplayNumbers import { shallowMount } from '@vue/test-utils'; import DisplayNumbers from '@/components/DisplayNumbers.vue'; test('renders as expected', () => { const wrapper = shallowMount(DisplayNumbers, { stubs: ['v-container', 'v-card', 'v-card-title', 'v-card-t propsData: { title: 'title text', numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], }, }); expect(wrapper).toMatchSnapshot(); });
  11. 11. COMPONENT TESTS Home #1 import { shallowMount } from '@vue/test-utils'; import Home from '@/views/Home.vue'; const shallowMountComponent = () => shallowMount(Home, { stubs: ['v-container', 'v-btn', 'v-row', 'v-col'], }); test('renders as expected', () => { const wrapper = shallowMountComponent(); expect(wrapper).toMatchSnapshot(); }); // ...
  12. 12. COMPONENT TESTS Home #2 // ... test('extracts a number and render as expected', async () => { jest.spyOn(global.Math, 'random') .mockReturnValueOnce(0.123456789) .mockReturnValueOnce(0.987654321); const wrapper = shallowMountComponent(); wrapper.vm.handleExtract(); await wrapper.vm.$nextTick(); expect(wrapper).toMatchSnapshot(); wrapper.vm.handleExtract(); await wrapper.vm.$nextTick(); expect(wrapper).toMatchSnapshot(); jest.spyOn(global.Math, 'random').mockRestore(); });
  13. 13. ONE-WAY DATA FLOW
  14. 14. STATE FLOW SUMMARY Flow process Vue.js component State data and computed View <template> Actions methods
  15. 15. STATE PROBLEM
  16. 16. Solution 1: Moving state to parent components move data() from Home to App receiving numbers in Home and Footer as props emitting an event when "Extract" button is clicked in Home handling extract event in App component, moving methods from Home to App updating tests
  17. 17. PROS fast and easy in small apps keep the state in the components where it is used (if there is no need to pass it to other components) no extra dependencies testing sub-components with propsData and snapshots
  18. 18. CONS multiple views may depend on the same piece of state actions from different views may need to mutate the same piece of state messy on big apps, lots of extra code for passing props, emitting events hard to follow state changes on many levels what is causing a data change?
  19. 19. WHAT IS VUEX? A state management pattern/library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. https://vuex.vuejs.org/
  20. 20. WHEN SHOULD I USE IT? There's a good quote from Dan Abramov, the author of Redux: Flux libraries are like glasses: you’ll know when you need them. https://vuex.vuejs.org/
  21. 21. WHEN SHOULD I USE IT? It's a trade-off between short term and long term productivity. If you jump right into Vuex, it may feel verbose and daunting. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. https://vuex.vuejs.org/
  22. 22. VUEX FLOW
  23. 23. INSTALL VUEX or <script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></script> npm install --save vuex # or yarn add vuex # https://yarnpkg.com/ # or npx @vue/cli add vuex # https://cli.vuejs.org/ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); https://vuex.vuejs.org/installation.html
  24. 24. CONFIGURE VUEX Creating the store // src/store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { /* ... */ }, mutations: { /* ... */ }, }); https://vuex.vuejs.org/guide/
  25. 25. CONFIGURE VUEX Enabling this.$store inside Vue components // src/main.js // ... import store from './store'; new Vue({ store, // same as `store: store` // ... }); https://vuex.vuejs.org/guide/
  26. 26. CONCEPTS: STATE Creation new Vuex.Store({ state: { count: 0 }, // ... }); https://vuex.vuejs.org/guide/state.html
  27. 27. CONCEPTS: STATE Basic usage <div> {{ $store.state.count }} {{ count }} </div> computed: { count () { return this.$store.state.count; } } https://vuex.vuejs.org/guide/state.html
  28. 28. CONCEPTS: STATE mapState usage import { mapState } from 'vuex'; export default { // ... computed: mapState({ count: state => state.count, countAlias: 'count', // to access local state with `this` countPlusLocalState (state) { return state.count + this.localCount; } }) }; https://vuex.vuejs.org/guide/state.html
  29. 29. CONCEPTS: STATE mapState usage simplified is the same as mapState({ count: state => state.count }) mapState([ 'count' ]) https://vuex.vuejs.org/guide/state.html
  30. 30. CONCEPTS: STATE mapState usage with other computed values computed: { ...mapState({ // ... }), localComputed () { /* ... */ } } https://vuex.vuejs.org/guide/state.html
  31. 31. CONCEPTS: GETTERS Getters are like "computed" values for a Vuex store Creation const store = new Vuex.Store({ state: { count: 0 }, getters: { countIsEven: state => { return state.count % 2 === 0; } } }); https://vuex.vuejs.org/guide/getters.html
  32. 32. CONCEPTS: GETTERS Basic usage <div> {{ $store.getters.countIsEven }} {{ countIsEven }} </div> computed: { countIsEven () { return this.$store.getters.countIsEven; } } https://vuex.vuejs.org/guide/getters.html
  33. 33. CONCEPTS: GETTERS mapGetters usage import { mapGetters } from 'vuex'; export default { // ... computed: mapGetters({ countIsEvenAlias: 'countIsEven' }) }; https://vuex.vuejs.org/guide/getters.html
  34. 34. CONCEPTS: GETTERS mapGetters advanced usage computed: { ...mapState(['count']), ...mapGetters(['countIsEven']), localComputed () { /* ... */ } } https://vuex.vuejs.org/guide/getters.html
  35. 35. CONCEPTS: MUTATIONS Committing a mutation is the only way to actually change state in a Vuex store. Creation const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state, payload=1) { state.count += payload; } } }); https://vuex.vuejs.org/guide/mutations.html
  36. 36. CONCEPTS: MUTATIONS Basic usage methods: { increment (value) { return this.$store.commit('increment', value); } } https://vuex.vuejs.org/guide/mutations.html
  37. 37. CONCEPTS: MUTATIONS mapMutations usage import { mapMutations } from 'vuex'; export default { // ... methods: { ...mapMutations([ 'increment' ]), ...mapMutations({ add: 'increment' }) } }; https://vuex.vuejs.org/guide/mutations.html
  38. 38. MUTATIONS MUST BE SYNCHRONOUS Why? Because we need to have a "before" and "a er" snapshots of the state. If we introduce a callback inside a mutation, it makes that impossible. The callback is not called yet when the mutation is committed, and there's no way to know when the callback will actually be called. Any state mutation performed in the callback is essentially un-trackable! https://vuex.vuejs.org/guide/mutations.html
  39. 39. CONCEPTS: ACTIONS Actions are similar to mutations, with a few differences: Instead of mutating the state, actions commit mutations. Actions can contain arbitrary asynchronous operations. https://vuex.vuejs.org/guide/actions.html
  40. 40. CONCEPTS: ACTIONS Creation const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state, payload=1) { state.count += payload; } }, actions: { incrementAsync (context, payload) { setTimeout(() => { context.commit('increment', payload); }, 1000); } } }); https://vuex.vuejs.org/guide/actions.html
  41. 41. CONCEPTS: ACTIONS API call example const store = new Vuex.Store({ actions: { async getRecords (context) { context.commit('getRecordsRequest'); try { const results = await axios.get('/api/records/'); context.commit('getRecordsSuccess', results.data); } catch (error) { context.commit('getRecordsFailure', error); } } } }); https://vuex.vuejs.org/guide/actions.html
  42. 42. CONCEPTS: ACTIONS Context object context.commit to commit a mutation context.state access the state context.getters access the getters context.dispatch to call other actions https://vuex.vuejs.org/guide/actions.html
  43. 43. CONCEPTS: ACTIONS mapActions usage import { mapActions } from 'vuex'; export default { // ... methods: { incrementAsyncLocal (value) { return this.$store.dispatch('incrementAsync', value) .then( /* ... */); } ...mapActions(['incrementAsync']), ...mapActions({ addAsync: 'incrementAsync' }) } }; https://vuex.vuejs.org/guide/actions.html
  44. 44. EXAMPLE APP Creating the store, default state // src/store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export const defaultState = { availableNumbers: [...Array(90).keys()] .map((i) => i + 1), extractedNumbers: [], };
  45. 45. EXAMPLE APP Creating the store, getters // src/store/index.js export const getters = { ascendingExtractedNumbers(state) { return [...state.extractedNumbers].sort((a, b) => a - b); }, };
  46. 46. EXAMPLE APP Creating the store, mutations // src/store/index.js export const mutations = { extractNumber(state) { const index = Math.floor( Math.random() * state.availableNumbers.length); const extracted = state.availableNumbers .splice(index, 1); state.extractedNumbers = state.extractedNumbers .concat(extracted); }, };
  47. 47. EXAMPLE APP Creating the store, composing // src/store/index.js export default new Vuex.Store({ state: defaultState, getters, mutations, });
  48. 48. EXAMPLE APP Home component, data and computed function @@ src/views/Home.vue - data() { - return { - availableNumbers: [...Array(90).keys()].map((i) => i + - extractedNumbers: [], - }; - }, computed: { - ascendingExtractedNumbers() { - return [...this.extractedNumbers].sort((a, b) => a - b) - }, + ...mapState(['availableNumbers', 'extractedNumbers']), + ...mapGetters(['ascendingExtractedNumbers']), },
  49. 49. EXAMPLE APP Home component, method @@ src/views/Home.vue - <button @click="handleExtract">Extract</button> + <button @click="extractNumber">Extract</button> methods: { - handleExtract() { - const index = Math.floor(Math.random() * this.available - const extracted = this.availableNumbers.splice(index, 1 - this.extractedNumbers = this.extractedNumbers.concat(ex - }, + ...mapMutations(['extractNumber']), },
  50. 50. MOVING TO VUEX STORE FLOW Vue.js component Vuex store Map in data state computed computed getters computed sync methods mutations methods async methods actions methods
  51. 51. STORE TESTS Default state import { defaultState } from '@/store'; test('should have the default state', () => { expect(defaultState).toEqual({ availableNumbers: [...Array(90).keys()].map((i) => i + 1), extractedNumbers: [], }); });
  52. 52. STORE TESTS Getters import { getters } from '@/store'; const { ascendingExtractedNumbers } = getters; test('ascendingExtractedNumbers', () => { expect( ascendingExtractedNumbers({ extractedNumbers: [12, 56, 34] }) ).toEqual([12, 34, 56]); });
  53. 53. STORE TESTS Mutations import { mutations } from '@/store'; const { defaultState, extractNumber } = mutations; test('ascendingExtractedNumbers', () => { jest.spyOn(global.Math, 'random') .mockReturnValueOnce(0.123456789) .mockReturnValueOnce(0.987654321); const state = { ...defaultState }; expect(state.availableNumbers).toHaveLength(90); // ...
  54. 54. STORE TESTS Mutations // ... extractNumber(state); expect(state.availableNumbers).toHaveLength(89); expect(state.extractedNumbers).toEqual([12]); extractNumber(state); expect(state.availableNumbers).toHaveLength(88); expect(state.extractedNumbers).toEqual([12, 89]); jest.spyOn(global.Math, 'random').mockRestore(); });
  55. 55. STORE TESTS Actions Keep in mind this sample action // export const actions = { async getRecords (context) { context.commit('getRecordsRequest'); try { const results = await axios.get('/api/records/'); context.commit('getRecordsSuccess', results.data); } catch (error) { context.commit('getRecordsFailure', error); } } // };
  56. 56. STORE TESTS Actions Mocking calls using jest .mockReturnValue(value) for mocking sync results .mockResolvedValue(value) for mocking async results with success .mockRejectedValue(value) for mocking async results with failure import axios from 'axios'; import { actions } from '@/store'; jest.mock('axios', () => ({ get: jest.fn(), })); https://jestjs.io/docs/mock-functions
  57. 57. STORE TESTS Actions Mocking axios success const { getRecords } = actions; test('getRecords success', async () => { const commit = jest.fn(); axios.get.mockResolvedValue({ data: 'ok' }); await getRecords({ commit }); expect(commit).toHaveBeenCalledWith('getRecordsRequest'); expect(axios.get).toHaveBeenCalledWith('/api/records/'); expect(commit).toHaveBeenCalledWith( 'getRecordsSuccess', 'ok'); });
  58. 58. STORE TESTS Actions Mocking axios failures const { getRecords } = actions; test('getRecords failure', async () => { const commit = jest.fn(); axios.get.mockRejectedValue('my error'); try { await getRecords({ commit }); // Fail test if above expression doesn't throw anything expect(true).toBe(false); } catch (error) { expect(commit).toHaveBeenCalledWith('getRecordsRequest'); expect(axios.get).toHaveBeenCalledWith('/api/records/'); expect(commit).toHaveBeenCalledWith( 'getRecordsFailure', 'my error'); } });
  59. 59. COMPONENT TESTS USING ORIGINAL STORE (NOT SUGGESTED) import { shallowMount } from '@vue/test-utils'; import Home from '@/views/Home.vue'; import store from '@/store'; test('snapshot test with default props', () => { const wrapper = shallowMount(Home, { store }); expect(wrapper).toMatchSnapshot(); }); https://vue-test-utils.vuejs.org/guides/using-with-vuex.html
  60. 60. COMPONENT TESTS USING ORIGINAL STORE (NOT SUGGESTED) Pros fast and easy, store implementation ready-to-use Cons less control over store mocking and external calls https://vue-test-utils.vuejs.org/guides/using-with-vuex.html
  61. 61. COMPONENT TESTS MOCKING THE STORE import { shallowMount, createLocalVue } from '@vue/test-utils' import Vuex from 'vuex'; import Home from '@/views/Home.vue'; const localVue = createLocalVue(); localVue.use(Vuex); // ... https://vue-test-utils.vuejs.org/guides/using-with-vuex.html
  62. 62. COMPONENT TESTS MOCKING THE STORE // ... describe('Home.vue', () => { let state, getters, mutations, actions, store; beforeEach(() => { state = { count: 0 }; getters = { getter1: () => 'mocked return value' }; mutations = { mutation1: jest.fn() }; actions = { action1: jest.fn() }; store = new Vuex.Store({ state, getters, mutations, actions }); }); // ... https://vue-test-utils.vuejs.org/guides/using-with-vuex.html
  63. 63. COMPONENT TESTS MOCKING THE STORE // ... test('snapshot test with default props', () => { const wrapper = shallowMount(Home, { store, localVue }); expect(wrapper).toMatchSnapshot(); // ... }); }); https://vue-test-utils.vuejs.org/guides/using-with-vuex.html
  64. 64. RECAP What we learned today? Why use Vuex Install and configure a Vuex store Test store and components
  65. 65. LINKS @dennybiasiolli vuex.vuejs.org vue-test-utils.vuejs.org github.com/dennybiasiolli/bingo-extraction dennybiasiolli.com

×