Vuex 라이프 사이클

[ref] Vuex 기본개념 : Vuex 제대로 사용하는 방법 (Vuex의 기초부터 심화까지)

[ref] Vuex 심화 (모듈화): [Vuetorials] 7. Vuex Best Practice로 가는 여정

1. 사용 흐름 예시)
   1. javascript 파일 => Actions,Mutations, Getters,State 접근 가능
      • router.js 참고 : store.getters["myStore/isLogin"]
   2. Vue Components => Actions 호출 (비동기일때) => Mutations호출 => State 조작
      • https://livebook.manning.com/book/testing-vue-js-applications/chapter-6/70
   3. Vue Components => Mutations호출 (동기일때) => State 조작
      • 뷰 콤포넌트에서 바로 뮤테이션 호출가능함.
        vuex 라이프사이클을 심플하게 보여주려고 하다보니 저렇게 그린거일뿐임
      • Vuex: Skipping Action and committing Mutation directly from Component
      • Chapter 6. Understanding Vuex · Testing Vue.js Applications
   4. Vue Components => State 데이터읽기 OK
      But State 데이터변경 No!
      outside에서 mutation에 의한 변경 금지!!!(그럼 vuex에서 변이관리 안해줌)
2. State 참조시 주의사항
   • <input v-model=”state.item.userId” /> 이런식으로 바로 데이터조작을 해버리면,
     아래처럼 strict: process.env.NODE_ENV !== "production", 즉 개발시엔 strict : true 이므로 난리부르스남.

     

     Error: [vuex] do not mutate vuex store state outside mutation handlers.

      
   • 회피 전략 :
     • 2가지 방법 :
       1. VueX Strict Mode - Write better forms while keeping all VueX State changes inside mutation