스스슥
64
2021-01-06 14:16:18 작성 2021-01-07 06:46:06 수정됨
6
110

Vue.js this.$store.state.data 값 변경해서 질문이 있습니다.


// index.js

export const store = new Vuex.Store({

  state: {

        message: ""

  }  

})


// Main 컴포넌트

methods: {

  함수() {

    axios.post(주소, 파라미터)

    .then(response => this.$store.state.message = response.data,

                                  console.log(this.$store.state.message);

  }

}


이렇게 콘솔을 찍으면 처음 버튼을 눌렀을때 콘솔에 공백만 찍히고

두번째에 눌러야 값이 담기는데 왜그런지 알 수 있을까요?

0
  • 답변 6

  • 니르바나
    1k
    2021-01-06 14:30:16

    then 밖에 콘솔이 있나요?

    then은  post가 완료되어야 호출되는 콜백함수가 들어가는거라.

    response => {

    ...

    }

    이 안에 콘솔을 찍으시면 그대로 나올거에요.

    밖에서 호출하셨으면 message가 업데이트 되기 전에 호출되서 비어있는걸로 나오는겁니다.

  • hojun1023
    16
    2021-01-06 14:38:14

    methods: {

      함수() {

        axios.post(주소, 파라미터)

        .then(response => {

                this.$store.state.message = response.data

                console.log(this.$store.state.message

            });

      }

    }


    이렇게 해보세요

  • hojun1023
    16
    2021-01-06 14:39:16

    console.log가 then의 두번째 파라미터로 전달되고 있어서 의도하신것처럼 동작 안 하는거 같습니다.

  • 에르딘트
    2k
    2021-01-06 14:40:25

    어딘가에서 초기화 시키는 건 아닌지 확인해 보세요.

    처음에 콘솔이 찍혔단 건 값이 들어간 거죠

  • 스스슥
    64
    2021-01-06 14:50:36

    then 안에서 콘솔을 찍어봤는데 안나온거예요! 

    다른데서 초기화 안하고있는데 안나오네요 ㅠ 

  • 스스슥
    64
    2021-01-06 14:55:24

    ++ hojun1023 님처럼 했더니 콘솔창에 찍히네요 !! 중괄호가 없어서 그랬나봐요

    혹시 그럼 

    // 메인컴포넌트

    methods: {

      함수() {

        axios.post(주소, 파라미터)

        .then(response => {

                this.$store.state.message = response.data

                window.open("주소", "_self")


            });

      }

    }

    // 다른 컴포넌트

    created() {

      console.log( this.$store.state.message);

    }

    메인컴포넌트에서 set data하고 

    다른컴포넌트로 페이지 이동했을때 

    다른컴포넌트에선 왜 값이 다시 초기화됐는지 알수있을까요 ?

  • 로그인을 하시면 답변 을 등록할 수 있습니다.