집 >웹 프론트엔드 >JS 튜토리얼 >vuex 구현 방법에 대한 자세한 설명(상세 튜토리얼)

vuex 구현 방법에 대한 자세한 설명(상세 튜토리얼)

亚连원래의: 2018-06-06 14:18:551933검색

이 글에서는 주로 간단한 vuex를 구현하는 방법을 소개하고 참고하겠습니다.

먼저 vuex를 사용하는 이유를 알아야 합니다. 상위 및 하위 구성 요소 간의 통신은 props 및 사용자 정의 이벤트를 사용하여 수행할 수 있으며, 간단한 비상위 및 하위 구성 요소 통신은 버스(빈 Vue 인스턴스)를 사용합니다. 그런 다음 vuex를 사용하여 부모-자식이 아닌 복잡한 구성 요소 통신을 해결합니다.

vuex 사용법만 알면 상관없습니다. 설명서를 읽어보면 누구나 코딩 방법을 알 수 있습니다. vuex가 어떻게 구현되는지 알고 싶지 않으신가요? !

vuex의 소스 코드는 제쳐두고 먼저 간단한 "vuex"를 구현하는 방법을 생각해 보겠습니다. 얼마나 간단합니까? 저는 게터, 돌연변이, 액션 등을 원하지 않고 단지 상태만 원합니다.

비부모-자식 컴포넌트 통신

구현 전에 공식 웹사이트의 예를 빌려 버스 구현을 검토해야 합니다.

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit(&#39;id-selected&#39;, 1)

// 在组件 B 创建的钩子中监听事件
bus.$on(&#39;id-selected&#39;, function (id) {
 // ...
})

그때를 생각해보면 어디에 두어야 할지 몰랐습니다. 인스턴스화된 버스를 만들고 마침내 넣을 수밖에 없었습니다. 창 아래에는 항상 window.bus가 사용됩니다. 이는 괜찮지만 여전히 전역 범위에 영향을 미칩니다.

어느 날 갑자기 vue의 루트 인스턴스 아래에 마운트할 수 있다는 사실을 발견했습니다(이제부터 window.bus에 작별 인사). 소통할 수 있는 행사에. 실제로 버스는 데이터가 반응하는 Vue 인스턴스입니다. 예를 들어 앱의 루트 인스턴스 아래에는 부모-자식이 아닌 두 개의 구성 요소가 있는데 둘 다 버스 데이터를 사용하므로 동기적으로 응답합니다.

var app = new Vue({
 el: &#39;#app&#39;,
 bus: bus
})

// 使用 bus
app.$options.bus

// or
this.$root.$options.bus

위에서 하위 구성요소 a는 count를 수정합니다. 하위 구성요소 b가 count를 사용하면 최신 count 값에 응답할 수 있습니다.

너무 많은 말을 했는데 아직 발견하지 못하셨나요? 이것은 단지 비컴포넌트 간의 통신, 즉 vuex의 상태를 구현하는 것이 아닐까요? !

버스 캡슐화

예, 지금 바로 버스를 캡슐화하세요. 이것은 가장 간단한 "vuex"입니다(상태 기능만 포함). 먼저, 부모-자식 구성 요소가 아닌 childA 및 childB 2개가 포함된 루트 인스턴스 앱을 갖게 됩니다.

html 코드는 다음과 같이 구현됩니다.

var bus = new Vue({
 data: {
  count: 0
 }
})

implementation of non-parent-child 구성 요소

그런 다음 두 개의 비-부모-자식 구성 요소와 앱 구현이 있습니다. 이 구성 요소는 모두 버스 수를 사용합니다. 여기서는 store.state와 vuex로 표시됩니다. 일관성:

<p id="app">
 <child-a></child-a>
 <child-b></child-b>
</p>

코드에 구현할 Store가 있는지 확인하세요. 필수 매개변수는 여기서 Vue.use()를 사용하기에는 너무 게으르기 때문에 Vue를 사용할 매개변수로 직접 전달한 다음 두 번째 매개변수는 vuex를 사용하여 전달한 매개변수와 일치합니다.

Store 구현

다음 단계는 2단계 구현인 Store 구현입니다.

// 待实现
const store = new Store(Vue, {
 state: {
  count: 0
 }
})

// 子组件 a
const childA = {
 template: &#39;<button @click="handleClick">click me</button>&#39;,
 methods: {
  handleClick () {
   this.$store.state.count += 1
  }
 }
}

// 子组件 b
const childB = {
 template: &#39;<p>count: {{ count }}</p>&#39;,
 computed: {
  count () {
   return this.$store.state.count
  }
 }
}

new Vue({
 el: &#39;#app&#39;,
 components: {
  &#39;child-a&#39;: childA,
  &#39;child-b&#39;: childB
 },
 store: store
})

에서 구현한 Store는 단순한 "vuex"로, vuex 상태를 가지며, 이는 비부모 컴포넌트와 자식 컴포넌트 간의 간단한 통신을 허용하기에 충분합니다.

Store 생성자에서 버스 인스턴스를 생성하고 Vue 프로토타입에 삽입하면 모든 구성 요소가 버스 인스턴스인 this.$store에 액세스할 수 있습니다. this.$store는 Vue 인스턴스이므로 this.$store.state.count에 액세스하면 실제로 데이터에 액세스하여 상위가 아닌 구성 요소와 하위 구성 요소 간의 응답 동기화가 달성됩니다. 모든 소스 코드는 여기에서 확인할 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

vuex 구현 방법에 대한 자세한 설명(상세 튜토리얼)

관련 기사