v-model과 Vuex 스토어를 우아하게 사용하는 방법

v-model과 Vuex 스토어를 우아하게 사용하는 방법

v-model 및 vuex 스토어를 사용할 수 있는 깨끗한 방법을 찾습니다.

Vuex는 여러 도우미 방법을 제공하지만 v-model과 함께 사용할 경우 다소 번거롭습니다.

현재 v-model과 모듈화된 스토어를 사용하는 방법은 다음과 같습니다.

computed: {
  type: {
    get() {
      return this.$store.state.mymodule.type;
    },
    set(newValue) {
      this.$store.dispatch('mymodule/setType', newValue)
    }
}

이것은 효과가 있지만, 나는 보일러 플레이트 코드를 피하기 위해 vuex 도우미의 이익을 얻는 것이 더 낫다는 것을 알았다.$store, 모듈명 등)

네, 먼저 모듈 이름을 삭제하겠습니다.Vuex는 뛰어난 create Namesched를 제공합니다.모듈화된 도우미를 반환하는 도우미.

사용방법:

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

이것으로 모듈 전용의 mapState 및 mapActions 함수가 깨끗해졌습니다.

computed: {
  ...mapState(['type']) // No need here to specify module name :)
}

꽤 멋진데, mapState는 기능밖에 없기 때문에 데이터를 갱신하기 위한 디스패치 기능을 설정할 수 없습니다.

v-model을 사용하는 경우 도우미를 사용할 수 없습니다.mapState를 사용할 수 없기 때문에 createNamesched를 사용할 수 없습니다.도우미.

그래서 : Vuex 도우미 기능과 v-model의 장점을 어떻게 함께 사용할 수 있을까요?

그럴수는 없어요.helper를 v-model과 결합하는 우아한 방법은 없습니다.하지만 v-model은 통사적인 설탕일 뿐이므로 아마도 가장 읽기 쉬운 방법은 도우미를 사용하는 것이다.

computed: {
  ...mapGetters('path/to/module', ['type'])
},
methods: {
  ...mapActions('path/to/module', ['setType'])
}

v-model 제외

<input :value="type" @input="setType">

내가 마침내 가장 읽을 수 있는 방법은 다음과 같습니다.

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

다음과 같이 사용됩니다.

computed: {
  ...mapGetters(['type'])
},
methods: {
  ...mapActions(['setType'])
}

v-model이 없으면

<input :value="type" @input="setType($event.target.value)">

이거 먹어봐.

// in some utils/vuex.js file 
export const mapSetter = (state, setters = {}) => (
  Object.keys(state).reduce((acc, stateName) => {
    acc[stateName] = {
      get: state[stateName],
   };
   // check if setter exists
   if (setters[stateName]) {
      acc[stateName].set = setters[stateName];
   }

   return acc;
 }, {})
);

컴포넌트 내.vue 파일

  import { mapSetter  } from 'path/to/utils/vuex.js';
  ...

  export default {
    name: 'ComponentName',
    computed: {
      ...mapSetter(
        mapState({
          result: ({ ITEMS }) => ITEMS.result,
          total: ({ ITEMS }) => ITEMS.total,
          current: ({ ITEMS }) => ITEMS.page,
          limit: ({ ITEMS }) => ITEMS.limit,
        }),
        {
          limit(payload) {
            this.$store.dispatch({ type: TYPES.SET_LIMIT, payload });
          },
        },
      )
    },
  }

이제 v-model 바인딩이 작동합니다.

언급URL : https://stackoverflow.com/questions/54439712/how-to-elegantly-use-v-model-and-vuex-store