Vue 프로젝트 Vuex Helpers

 

Vue 프로젝트 Vuex Helpers

 

1. /src/routes/About.vue 수정

- computed 수정 (반복적인 코드 간소화)

 

...
<script>
import { mapState } from 'vuex'
import Loader from '~/components/Loader'

export default {
  components: {
    ...
  },
  data() {
    ...
  },
  computed: {
    ...mapState('about', [
      'image',
      'name',
      'email',
      'git',
      'blog'
    ])    
  },
  ...
}
</script>
...

 

2. /src/components/Header.vue 수정

- computed 수정 (반복적인 코드 간소화)

...
<script>
import { mapState } from 'vuex'
import Logo from '~/components/Logo'

export default {
  ...
  computed: {
    ...mapState('about', [
      'image',
      'name'
    ])
  },
  ...
}
</script>
...

 

3. /src/components/MovieList.vue 수정

- computed 수정 (반복적인 코드 간소화)

...
<script>
import { mapState } from 'vuex'
...

export default {
  components: {
    ...
  },
  computed: {
    ...mapState('movie', [
      'movies',
      'message',
      'loading'
    ])
  }
}
</script>
...

 

4. /src/routes/Movie.vue 수정

- computed 수정 (반복적인 코드 간소화)

...
<script>
import { mapState } from 'vuex'
import Loader from '~/components/Loader'

export default {
  ...
  computed: {
    ...mapState('movie', [
      'theMovie',
      'loading'
    ])
  },
 ...
}
</script>
...

 

---

 

참고

https://next.vuex.vuejs.org/guide/state.html#getting-vuex-state-into-vue-components

State | Vuex