[vus.js] Vuex란?

✔ Vues란 상태(state)를 관리하는 라이브러이이다. 

여기서 상태란? 

new Vue({
  // 상태
  data () {
    return {
      count: 0
    }
  },
  // 뷰
  template: `
    <div>{{ count }}</div>
  `,
  // 액션
  methods: {
    increment () {
      this.count++
    }
  }
})

 

여기서 data()를 상태(state)라고 부르는데 컴포넌트 간의 공유할 수 있는 데이터를 말한다.

이 상태를 관리하는 것이 Vuex이다. 

 

---

prop나 ref등 컴포넌트 간 데이터(상태)를 공유할 수 있는데 왜 Vuex가 필요한걸까?

• 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우, 지나치게 중첩된 컴포넌트를 통과하는 prop이 생기게 된다. 이는 나중에 유지보수하기 힘든 난해한 코드가 될 수 있다.
• 공통의 상태를 공유하기 때문에, 이 상태가 여러 컴포넌트에서 동일한 상태로 관리되어야 한다. Vue는 단방향으로 데이터가 흐르기때문에, 여러 컴포넌트가 한 상태를 공유하는 경우, 형제 컴포넌트간의 상태공유/관리가 복잡해질 수 있다.

🛑🛑Vuex는 store(저장소)를 가지고 있다.

상태(state)의 저장소를 가지고 있는 것인데 Vuex의 상태는 메모리에 저장되는 것이기 때문에 새로 고침시 초기화된다.

Vuex는 컴포넌트 단위의 data()가 그저 어플리케이션 단위의 data()가 된 것이라고 보면 된다. 

data()가 localStorage에 저장되지는 않는다. 새로고침하면 초기화됨