# Vuex

# State

States in Vuex follow the same rules as the data in a Vue instance.

# Input


 






 





<template>
  <p>The best ice cream flavor is "{{ flavor }}"</p>
</template>

<script>
export default {
  computed: {
    flavor() {
      return this.$store.state.flavor
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# Input: (store.js)








 



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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    flavor: 'Salted Caramel'
  }
})
1
2
3
4
5
6
7
8
9
10

# Output

The best ice-cream flavor is "Salted Caramel".

# Getters

# Input: (.vue file)



 






 
 
 






<template>
  <div>
    <li v-for="videoGame in videoGames" :key="videoGame">
      {{ videoGame.name }}
    </li>
  </div>
</template>

<script>
export default {
  computed: {
    videoGames() {
      return this.$store.getters.videoGames
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Input: (store.js)








 
 
 
 
 


 
 
 


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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    videoGames: [
      { id: 1, name: 'Mario Bros', finnished: true },
      { id: 2, name: 'Zelda', finnished: false },
      { id: 2, name: 'Metal Gear Solid', finnished: true }
    ]
  },
  getters: {
    videoGames: state =>
      state.videoGames.filter(videoGames => videoGames.finnished)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Output:

  • Mario Bros
  • Metal Gear Solid
  • # Communication with VUEX

    # Using mapGetters

    # Input: (.vue file)



     




     



     
     
     
     




    <template>
      <div>
        <p>Your username is: {{ username }}</p>
      </div>
    </template>
    
    <script>
    import { mapGetters } from 'vuex'
    
    export default {
      computed: {
        ...mapGetters([
          'username'
          // ...
        ])
      }
    }
    </script>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    # Input: (store.js)








     

     
     
     
     
     


    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        username: 'BenAfleckIsAnOkActor'
      },
      getters: {
        username: state => {
          return state.username
        }
      }
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    # Output:

    Your username is: BenAfleckIsAnOkActor

    # Actions and Mutations

    The only way to actually change state in a Vuex store is by committing a mutation.

    Actions are similar to mutations, the differences being that: Instead of mutating the state, actions commit mutations. Actions can contain arbitrary asynchronous operations.

    # Grabbing the Whole context

    # Input: (.vue file) {}



     
     









     


     
     
     


    <template>
      <div>
        <p>Counter: {{ stringCounter }}</p>
        <button @click="increment">+1</button>
      </div>
    </template>
    
    <script>
    import { mapGetters } from 'vuex'
    import { mapActions } from 'vuex'
    
    export default {
      computed: {
        ...mapGetters(['stringCounter'])
      },
      methods: {
        ...mapActions(['increment'])
      }
    }
    </script>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    # Input: (store.js)








     


     
     
     


     
     
     


     
     
     



    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        counter: 1
      },
      getters: {
        stringCounter: state => {
          return state.counter + 'click'
        }
      },
      mutations: {
        increment: state => {
          state.counter++
        }
      },
      actions: {
        increment: context => {
          context.commit('increment')
        }
      }
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25

    # Output:

    Counter: 1

    # Grabbing only the commit

    # Input: (.vue file)



     
     









     


     




    <template>
      <div>
        <p>Counter: {{ stringCounter }}</p>
        <button @click="decrement">-1</button>
      </div>
    </template>
    
    <script>
    import { mapGetters } from 'vuex'
    import { mapActions } from 'vuex'
    
    export default {
      computed: {
        ...mapGetters(['stringCounter'])
      },
      methods: {
        ...mapActions(['decrement'])
      }
    }
    </script>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    # Input: (store.js)








     


     
     
     


     
     
     


     
     
     



    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        counter: 100
      },
      getters: {
        stringCounter: state => {
          return state.counter + 'click'
        }
      },
      mutations: {
        decrement: state => {
          state.counter--
        }
      },
      actions: {
        decrement: ({ commit }) => {
          commit('decrement')
        }
      }
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25

    # Output:

    Counter: 100

    # Grabbing the commit and the payload

    # Input: (.vue file)



     
     









     


     




    <template>
      <div>
        <p>{{ stringCounter }}</p>
        <button @click="addOne">+1 (asynchronous)</button>
      </div>
    </template>
    
    <script>
    import { mapGetters } from 'vuex'
    import { mapActions } from 'vuex'
    
    export default {
      computed: {
        ...mapGetters(['stringCounter'])
      },
      methods: {
        ...mapActions(['addOne'])
      }
    }
    </script>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    # Input: (store.js)








     


     
     
     


     
     
     


     
     
     
     
     




    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        counter: 100
      },
      getters: {
        stringCounter: state => {
          return state.counter + 'click'
        }
      },
      mutations: {
        reset: state => {
          state.counter += 1
        }
      },
      actions: {
        addOne: ({ commit }) => {
          setTimeout(() => {
            commit('reset')
          }, 1000)
        }
      },
      modules: {}
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    # Output:

    100