Vuex로 주 정부를 관리한다. 나는 이 지침이 있기를 바란다

TL;DR: vuex flow 및/또는 skip to see the code 참조.
최근 몇 년 동안 전방에서 응용하는 기능이 갈수록 풍부해지고 있다."이것은 네트워크를 위한"것이 더 이상 데스크탑과 유사한 기능 요청을 거부하는 정당한 이유가 아닙니다.이와 함께 전단이 전통적인 MVC 모델에서 더욱 조립화된 구조로 바뀌고 있어 고체 관리 모델에 대한 수요도 나타나고 있다.어쨌든 서로 상호작용하는 구성 요소는 모든 대형 응용 프로그램의 중요한 구성 부분이다.
Flux는 페이스북이 발표한 디자인 모델로 구성 요소 기반의 클라이언트 응용 프로그램을 구축하기 위한 것이다.Flux 모델은 많은 실현이 있었지만 본고에서 우리는 Vuex를 중점적으로 소개할 것이다.이것은 내가 처음으로 Vuex의 상태 관리를 읽을 때 가지고 싶었던 지침이다.비밀번호가 있을 거야!

콘셉트

Vuex의 관건적인 개념은 상태, 조작, 돌연변이와 획득자이다.상태 객체는 응용 프로그램 상태를 포함하고 모든 구성 요소와 공유합니다.돌연변이가 상태를 바꾸는 유일한 방법이다.동작은 돌연변이를 제출하는데 관건적인 차이점은 돌연변이가 비동기적이어서는 안 된다는 것이다.우리는 비동기 조작을 호출해서 비동기 코드가 완성될 때 돌연변이를 제출해야 한다.모든 상태의 돌연변이는 동기화되어야 합니다!마지막으로, Getter는 상태의 특정 부분을 구성 요소에 사용하도록 되돌려줍니다.
 

메모리 영역 내의 데이터 흐름: 구성 요소가 돌연변이를 제출하는 동작을 만들고 돌연변이가 상태를 바꾸며 Getter가 일부 상태를 되돌려줍니다.
위에서 설명한 몇 가지 절차를 사용하지 않을 수 있지만, 완전성을 위해서, 저는 디자인에 사용된 절차에 따라 소개할 것입니다.

예제 응용 프로그램

우리는 속성을 저장하고 변이하며 구성 요소를 되돌려 주는 코드를 볼 것이다.예시 응용 프로그램은 어떤 활동 계산기의 개념이다.기본적인 생각은 계단을 오르거나 달리는 거리, 팔굽혀펴기 등 현재 진행 중인 운동을 선택한 다음에 하는 운동량을 더하는 것이다.이 예의 응용 프로그램은 두 가지 구성 요소로 구성되어 있습니다. 하나는 선택 연습이고, 다른 하나는 선택한 연습을 사용합니다. 완성된 '중복' 을 표시하고 데이터를 백엔드 서비스로 보내서 더 나은 처리를 할 수 있습니다.

비밀번호를 달다

코드를 시작합시다. ES6 기능을 사용하기 위해 vue cli 간단한 패키지 설정을 사용했습니다.먼저 Vuex 스토어를 만들겠습니다.

상점 안의 상태.js

스토어의 상태는 사용자가 원하는 내용을 포함할 수 있는 다른 객체일 뿐입니다.

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  selectedExercise: undefined
}
// ...

우리는 이미 상태 상대를 준비했다.js, 이것은 우리가 일정 시간 내에 변이할 selectedExercise를 포함합니다.

행동

그리고 우리는 액션 방법을 사용합니다. 위아래 문장을 첫 번째 매개 변수로 하고, 가능한 부하를 두 번째 매개 변수로 합니다.이 동작은 상하문을 호출해서 변이를 만듭니다.돌연변이 이름으로 제출하고 가능한 유효 하중을 전달합니다.

//store.js
const actions = {
  selectActiveExercise(context, exercise){
    console.log('selecting exercise action, ' + exercise.name)
    context.commit('selectExercise', exercise);
  }
}
// ...

돌변적 행위

돌변하다

그다음에 돌연변이.돌연변이는 상태를 첫 번째 파라미터로 하고 선택할 수 있는 부하를 두 번째 파라미터로 한다.이전 단계의 조작에 돌변이 발생하여 selectExercise 방법을 호출하여 상태를 진정으로 바꾸었다.

//store.js
const mutations = {
  selectExercise(state, exercise){
    console.log('selecting exercise mutation, ' + exercise.name)
    state.selectedExercise = exercise
  }
}
// ...

상태를 바꾸는 돌연변이

흡기제

마지막으로 잃어버린 부분, 상점에 노출된 흡기제.모든 구성 요소에서 selectedExercise getter를 호출하면 상태의 특정 부분을 되돌려줍니다.

//store.js
const getters = {
  selectedExercise(state){
    console.log('getting selected exercise')
    return state.selectedExercise
  }
}
// ...

Getter가 주의 일부로 돌아왔어요.

Vuex 스토어 내보내기

상점을 세우고 수출하면 우리는 그것을 사용할 수 있다.

//store.js
export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters
})

응용 프로그램 스토어 가져오기 및 응용 프로그램에서 사용

상점을 사용하여 프로그램을 초기화합니다.

// your app.js/main.js, some code omitted
import store from './store/store.js'

new Vue({
  el: '#app',
  store: store,
  router: router,
  template: '<App/>',
  components: { App }
})

새로 만든 앱스토어에서 앱스토어를 가져오고 있습니다.js를 응용 프로그램의 상점으로 지정합니다.

스토리지 내부 구성 요소 사용

작업 실행 및 상태 변경

현재 우리는 상점을 세웠기 때문에, 우리는 우리의 구성 요소에서 그것을 사용할 수 있다.먼저 동작 선택기 어셈블리는 동작 선택 작업을 실행하여 컨텍스트에 대해 활성 동작을 선택하는 작업을 트리거하고, 동작 선택 작업을 반대로 실행하면 변경 사항이 상태에 제출되는 돌연변이를 트리거합니다.

import { mapActions } from 'vuex'
export default {
  name: "exercise-selector",
  methods: {
    ...mapActions( {
      selectActiveExercise: 'selectActiveExercise'
    } )
  }
// code omitted...    
}

선택기 vue 구성 요소 연습

<template>
    <li class="exercise-row" @click="selectActiveExercise" role="button">
      <div class="name">{{ exercise.name }}</div>
      <div class="pointsPerUnit">
        <span>{{ exercise.pointsPerUnit }} points per {{ exercise.unit }}</span>
      </div>
    </li>
</template>

템플릿에서 매핑된 "selectActiveExercise"방법 사용

흡기제

상태를 바꾸면 저장소에 정의된 Getter를 다른 구성 요소에 비추겠습니다.이것은 구성 요소에 'selectedExercise' 라는 계산 Getter 방법을 효과적으로 만들 수 있습니다.

import { mapGetters } from 'vuex'
export default {
  name: "exercise-input",
  computed: {
  ...mapGetters([
    'selectedExercise'
   ])
  },
//...    
}

vuex 저장소에서 Getter "selectedExercise"를 매핑하여 계산 속성으로 사용
Getter가 구성 요소의 상하문에 있을 때, 우리는 템플릿에서 그것을 사용할 수 있습니다. 아래와 같습니다.

<div v-if="selectedExercise">
  <h2>Add exercise</h2>
  <div class="input-container">
    <div class="input-selected-name">{{ selectedExercise.name }}</div>
    <in-put class="input-number" v-on:keyup.enter="addExercise" type="number" placeholder="0" v-model="units"></in-put>
    <div class="input-unit">{{ selectedExercise.unit }}</div>
    <div class="input-details">Points {{ selectedExercise.pointsPerUnit}} per {{ selectedExercise.unit }}</div>
    <button @click="addExercise">Add to your exercises record<span class="forward"></span></button>
  </div>
</div> 

vuex 저장소에서 Getter "selectedExercise"를 매핑하여 계산 속성으로 사용
따라서, 우리는 템플릿에 비치는 Getter 방법을 사용합니다.이것은 저장소에서 데이터를 효과적으로 얻고, 선택한 연습의 변이를 변경할 때 구성 요소가 자동으로 업데이트됩니다.
이렇게 해서, Vuex와 몇 줄의 코드가 있습니다.

후기

몇 주 전에 나는 동료 모임에서 Vuex에 들어갔다.처음에는 동작과 돌연변이에 대한 모든 토론이 혼란스럽고 복잡한 것 같았지만, 몇 줄의 코드에서 이 점을 보면 상당히 명확하고 이해하기 쉽다.마지막으로 응용 프로그램의 규모가 점점 커지면서 집중식 상태를 사용하면 응용 프로그램 개발을 더욱 쉽게 할 수 있다.상태 변경이 모든 구성 요소에 반응으로 나타날 때, 이벤트를 보내거나 보기를 수동으로 업데이트하는 등 상태를 바꾸는 관건적인 기능에 집중할 수 있습니다.
나는 그것을 좋아한다. 그것은 내가 이전에 본 모든 수동 스크립트와 이벤트 기반 해결 방안보다 낫다.1마일 차이!