Please enable JavaScript.

Coggle requires JavaScript to display documents.

Vuex - Coggle Diagram

- - - - mapState
        
        useful for when there is multiple store state properties or getters
        
        declaring all these computed properties can get repetitive and verbose
        
        mapState helper which generates computed getter functions for us
      - What is it
        
        usually one store for each application
        
        single source of truth
        
        single object
    - - You can think of them as computed properties for stores.
      - receive the state as their 1st argument
      - Property-Style Access
        
        store.getters.doneTodos
      - Method-Style Access
        
        pass arguments to getters by returning a function
        
        store.getters.getTodoById(2)
      - mapGetters Helper
        
        ...mapGetters(['doneTodosCount','anotherGetter'])
        
        simply maps store getters to local computed properties
    - - change state in a Vuex store
        
        by committing a mutation
        
        store.commit('increment')
        
        Commit with Payload
        
        store.commit('increment', 10)
        
        Object-Style Commit
        
        store.commit({type: 'increment', amount: 10})
        
        commit mutations in components
        
        this.$store.commit('xxx')
        
        mapMutations
      - similar to events
      - has a string type and a handler
      - handler function performs actual state modifications
      - receive the state as the first argument
      - mutations: { increment (state) {state.count++}}
      - Constants for Mutation Types
        
        import { SOME_MUTATION } from './mutation-types'
      - Mutations Must Be Synchronous
      - mutations are synchronous transactions
    - - Often confused with mutations as they are similar
      - actions commit mutations
      - can contain arbitrary asynchronous operations.
      - call context.commit to commit a mutation
      - Dispatching Actions
        
        store.dispatch('increment')
      - Actions are triggered with the store.dispatch method
      - Dispatching Actions in Components
        
        this.$store.dispatch('xxx')
        
        mapActions
        
        maps component methods to store.dispatch calls
      - Composing Actions
        
        how do we know when an action is done?
        
        how can we compose multiple actions together
        
        answer, actions can handle Promise
        
        store.dispatch('actionA').then(() => {})
    - - using a single state tree, it can become a big object as the store can get really bloated
        
        to solve this
        
        divide our store into modules
        
        Each module can contain its own
        
        state
        
        mutations
        
        actions
        
        getters
        
        Namespacing
        
        By default, actions and mutations are still registered under the global namespace
        
        Getters are also registered in the global namespace by default.
        
        modules to be more self-contained or reusable
        
        mark it as namespaced with namespaced: true