vue.js

vuex

youngseokim_kr 2021. 11. 17. 15:09

https://next.vuex.vuejs.org/guide/state.html#the-mapstate-helper

<script>
import Loader from '~/components/Loader'
export default {
  components: { Loader },
  component:{
    Loader
  },
  data() {
    return{
      imageLoading:true
    }
  },
  computed: {
    image() {
      return this.$store.state.about.image
    },
    name(){
      return this.$store.state.about.name
    },
    email(){
      return this.$store.state.about.email
    },
    blog(){
      return this.$store.state.about.blog
    },
    phone(){
      return this.$store.state.about.phone
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    async init() {
      await this.$loadImage(this.image)
      this.imageLoading = false
    }
  }
}
</script>

이러한 코드를

<script>
import { mapState } from 'vuex'   //수정
import Loader from '~/components/Loader'
export default {
  components: { Loader },
  component:{
    Loader
  },
  data() {
    return{
      imageLoading:true
    }
  },
  computed: {
    ...mapState('about',[        //수정
      'image',                   //수정
      'name',                    //수정
      'email',                   //수정
      'blog',                    //수정
      'phone'                    //수정
    ])
  },
  mounted() {
    this.init()
  },
  methods:{
    async init() {
      await this.$loadImage(this.image)
      this.imageLoading = false
    }
  }
}
</script>

이렇게 작성할 수 있다. 

vuex에서 mapstate를 가져와서 첫 번째 인수로 about을 가져오고 두 번째 인수로 배열로 상태들을 가져오면 mapstate 함수로 실행된 결과가 반환이 됩니다.