Vuex-Pathify

Vuex-Pathify

 - store의 모든 속성에 대해 getter 및 mutation, action을 직접 작성하지 않고 자동으로 생성해준다.

npm install --save vuex-pathify

 

일반 Vuex와 비교

 - 일반 Vuex

// Main.js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const state = {
  firstName = 'Gildong',
  lastName = 'Hong',
}

// 우리는 State에 있는 값에 접근할 수 있어야 한다.
// 해당 값이 Store 외부에서 사용해야 한다.
const getters = {
  firstName: state => state.firstName,
  lastName: state => state.lastName,
}

// Mutation을 Store의 값을 변경하는데 사용한다.
const mutations = {
  SET_FIRST_NAME: (state, payload) => {
    state.firstName = payload
  },
  SET_LAST_NAME: (state, payload) => {
    state.lastName = payload
  },
}

const store = new Vuex.Store({
  state,
  getters,
  mutations,
})

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

// App.vue
<template>
  <div id="app">
    <h2> Name : {{ firstName }} {{ lastName }} </h2>
    <form>
      <label>
        First Name
        <input
          type="text"
          v-model="firstName"
        />
      </label>
      <label>
        Last Name
        <input
          type="text"
          v-model="lastName"
        />
      </label>
    </form>
  </div>
</template>

<script>
export default {
  name: 'app',
  computed: {
    // v-model에서 두 속성을 모두 사용하려면 계산된 getter 및 setter를 생성해야 한다.
    // store에 있는 변수를 사용하기 위해 꽤 많은 코드를 작성한다.
    firstName: {
      get() {
        return this.$store.getters.firstName
      }
      set(val) {
        return this.$store.commit('SET_FIRST_NAME', val)
      }
    },
    lastName: {
      get() {
        return this.$store.getters.lastName
      }
      set(val) {
        return this.$store.commit('SET_LAST_NAME', val)
      }
    },
  },
}
</script>

 

 - Vuex-Pathify 사용

// Main.js
import Vue from 'vue'
import Vuex from 'vuex'
import pathify from 'vuex-pathify'
import { make } from 'vuex-pathify'
import App from './App.vue'

Vue.use(Vuex)

const state = {
  firstName: 'Gildong',
  lastName: 'Hong',
}

// Pathify는 Getter도 필요 없고 Store 데이터를 직접 사용한다.
// 원한다면 make.getters(state)로 생성해 줄 수 있다.

// Mutations 및 Actions도 동일하다. (SET_* 형식을 사용하지만, 이 형식을 구성할 수 있다고 한다.)
const mutation = make.mutations(state)

const store = new Vuex.Store({
  // plugins를 꼭 작성해주어야 한다.
  plugins: [pathify.plugin],
  state,
  mutations,
})

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

// App.vue
<template>
  <div id="app">
    <h2> Name : {{ firstName }} {{ lastName }} </h2>
    <form>
      <label>
        First Name
        <input
          type="text"
          v-model="firstName"
        />
      </label>
      <label>
        Last Name
        <input
          type="text"
          v-model="lastName"
        />
      </label>
    </form>
  </div>
</template>

<script>
import { sync } from 'vuex-pathify'

export default {
  name: 'app',
  computed: {
    // sync helper는 Store 데이터 및 Mutation에 대한 양방향 바인딩을 만든다.
    firstName: sync('firstName'),
    lastName: sync('lastName'),
    
    // 가져올 데이터가 여러 개일 때
    // 다음과 같이 사용하여 코드를 더 줄일 수 있다.
    // ...sync(['firstName', 'lastName'])
  },
}
</script>

 

The Mechanics

 - Vuex-Pathify 중심에는 경로 시스템과 해결 알고리즘이 있다.

 - 경로는 다음과 같다.  module/property@nested.sub.property 

 

 - 예를 들어 path:  data/user/firstName 를 사용하여 pathify는 다음을 결정할 수 있다.

• 참조된 모듈은 모듈의  user 하위  data 모듈이다.
• getter는  data/user/firstName 에 대한 것이어야 한다.
• 관련 mutation은  data/user/SET_FIRST_NAME 
• 관련 action은  data/user/setFirstName 

 -  pathify.get('data/user/firstName') 을 사용하려면 pathify는 먼저 greet인  data  모듈의  user  하위 모듈에서 getter를 찾는다.

 - 그렇지 않으면 Store의  data.user.firstName  속성을 직접 참조하게 된다. 

 

 -  pathify.set('data/user/firstName') 를 호출하려면 먼저 Pathify가 관련 모듈에서  setFirstName  작업을 확인 한다.

 - 없으면  SET_FIRST_NAME  mutation을 확인하고 대신 사용한다.

 

 -  pathify.sync('data/user/greet') 를 사용하면 두 동작을 하나의 computed로 결합할 수 있다.

 -  @  구문을 사용하여 추가 하위 속성에 액세스할 수 있다.

 - 예를 들어  user  모듈이 없지만  data  모듈에  userData 속성이 있는 경우

 -  pathify.sync('data/userData@firstName') 를 대신 사용할 수 있다.

 

 - 이렇게 하면  commit() ,  dispatch()  등에 의존할 필요 없이 일관되고 단순한 구문으로 모든  Vuex  기능에 접근할 수 있다.

 

vuex-pathify 사용 방법에 대한 자세한 내용은 공식 문서를 참조하세요.

 

Vuex-Pathify 구성

 - 위의 정보는  vuex-pathify 를 시작하지 않았을 경우에 관심을 끌기에 충분하지만, 한 가지 유의해야 할 사항이 있다.

 - 모듈 구성은 보통과는 약간 다른 방식으로 수행된다.

 - 런타임에 생성자에게 전달된 옵션을 사용하는 대신  vuex-pathify 는 프로토타입의 속성을 수정하여 구성된다.

 - 플로그인을 구성하는 권장 방법은 다음과 같다.

1. 원본 디렉토리에  pathify.js 라는 새 파일을 만든다.
2. 구성 값을 가져오고 수정한다.
3.  pathify 를 다시 내보낸 후(Re-export 한 후) vuex 모듈에서 사용한다.

 

// pathify.js (New File)

// Pathify를 import한다.
import pathify from 'vuex-pathify'

// Mapping: /thing -> getter: thing, mutation: SET_THING, action: setThing
options.mapping = 'standard'	// default

// pathify를 다시 내보낸다(Re-export)
export default pathify

// main.js
...
import pathify from './pathify'	// 'vuex-pathify' 대신 사용한다.
...

 

수정할 수 있는 Options

mapping

 - mapping 옵션을 사용하면 Pathify 작업을 Vuex Store members에 mapping하는 방법을 결정하는데 도움이 된다.

 - 몇 가지 일반적인 사전 설정 중에서 선택하거나 사용자 지정 기능을 사용해서 구성할 수 있다.

Overview
  Pathify의 알고리즘은 foo/ 와 같은 Store members에 경로로 SET_FOO 등에 매핑합니다.
  사전 설정 또는 사용자 지정 기능을 사용하여 구성할 수 있습니다.

Presets
  선택할 수 있는 두 가지 mapping 사전 설정은 다음과 같습니다.

name	path	state	getter	mutation	action	notes
standard	/foo	foo	foo	SET_FOO	setFoo	대부분의 Vue 개발자가 사용
simple	/foo	foo	foo	foo	setFoo	단순하고 통합된 형식

  기본 표준 mapping에서 Pathify를 재구성하려면 Pathify의 옵션을 다음과 같이 설정하십시오.

pathify.options.mapping = 'simple'​

Custom function
  만약 명명체계에 mapping 사전 설정이 적용되지 않는 경우 사용자 지정 maaping 기능을 제공할 수 있다.
  가장 간단한 mapping 기능은 다음과 같은 인부 연결 및 서식이 있는 swicth/case 이다 :

function (type, name, formatters) {
  switch(type) {
    case 'mutations': 
      return formatters.const('set', name)	// SET_FOO
    case 'actions': 
      return formatters.camel('set', name)	// setFoo
    case 'getters':
      return formatters.camel('get', name)	// getFoo
  }
  return name	// foo
}​

  function은 store의 members를 올바르게 참조해야 하는 문자열을 반환해야 합니다.
  function은 다음 매개 변수를 사용하여 호출됩니다 : 

• type  { string }  - The member type. (ex: state, getters, mutations, or actions)
    구성원 유형 (예: state, getters, mutations 또는 actions)
• name  { string } - The name of the property being targeted. (ex: foo)
    대상으로 지정되는 속성의 이름입니다. (예: foo)
• formatters  { object }  -  A hash of common formatting functions, camel, snake, const
    일반적인 형식 함수의 해시, camel, snake, const

  다음과 같이 Pathify의 옵션에 할당합니다 : 

pathify.options.mapping = function (type, name, formatters) {
	// your custom mapping
}

Formatters
  formatters 함수는 편의상 세 번쨰 매개 변수로 전달되며, 당므 두 가지 역할을 수행합니다.

1. concatenate separate words
   단어를 따로따로 연결한다.
2. convert thier case
   케이스를 변환합니다.

  다음 세 가지 기능을 사용할 수 있습니다 : 

•  camel  - format as camelCase
•  snake  - format as snake_case
•  const  - format as CONST_CASE

  예를 들어 다음과 같습니다 :

formatters.const('set', 'items')	// SET_ITEMS

  내장된 formatters를 자유롭게 사용하거나 Lodash와 같은 타사 토우미를 사용할 수 있습니다.

 

deep

• Type: Number
• Default: 1

  - deep 옵션을 사용하면 객체 유형의 Store members에 대한 하위 속성 읽기/쓰기 및 짝수 생 성이 가능합니다 :

store.set('sort@order', 'asc')

  - 옵션은 다음과 같습니다 :

•  0  - disable access to sub-properties
    하위 속성에 대한 접근 사용 안함
•  1  - enable access to existing sub-properties
    기존 하위 속성에 대한 접근 사용
•  2  - enable creation of new sub-properties
  새 하위 속성 만들기 사용

  - 만약 하위 속성 생성이 활성화 된 경우,  store.set()  및  sync() 를 통해 새 하위 속성을 즉시 만들 수 있습니다.

 

  - 권한없이 하위 속성에 접근하거나 작성하려고 하면 실패하고, 콘솔 오류가 발생합니다.

 

strict

Not implemented yet. (아직 구현되지 않았습니다.)

• Type: Boolean
• Default: true

 - strict 옵션을 사용하면 존재하지 않는 속성에 접근하려고하면 오류가 발생합니다.

 

cache

Not implemented yet. (아직 구현되지 않았습니다.)

• Type: Boolean
• Default: true

 - cache 옵션을 사용하면 mapping 결과를 캐싱할 수 있으므로 경로에 접근하거나 계산된 속성이 재생성될 때 조회가 빨라집니다.

 

 - 캐시를 사용하지 않도록 설정해도 성능에 미치는 영향은 거의 없습니다.

---

출처 : https://www.digitalocean.com/community/tutorials/vuejs-vuex-pathify

Tame the Vuex Beast with vuex-pathify | DigitalOcean

https://davestewart.github.io/vuex-pathify/#/

Vuex Pathify