mapState 와 setter

mapState 와 setter

setter 메서드를 할당하고 싶다.mapState현재 관심 있는 변수의 이름을 붙이는 회피책을 사용하고 있습니다.todo임시 이름( )storetodo다른 계산변수로 참조합니다.todo.

methods: {
    ...mapMutations([
        'clearTodo',
        'updateTodo'
    ])
},
computed: {
    ...mapState({
        storetodo: state => state.todos.todo
    }),
    todo: {
        get () { return this.storetodo},
        set (value) { this.updateTodo(value) }
    }
}

추가 단계를 건너뛰고 직접 getter, setter를 정의합니다.mapState.

내가 왜 이걸 하고 싶겠어?

일반적인 접근법은mapMutations/mapActions&mapState/mapGetters위에서 설명한 계산된 get/set 조합을 사용하지 않고 HTML에서 직접 변환을 참조합니다.

<input v-model='todo' v-on:keyup.stop='updateTodo($event.target.value)' />

getter/setter 버전에서는 다음과 같이 간단하게 쓸 수 있습니다.

<input v-model='todo' />

getter/setter 형식을 사용하여mapState

당신이 시도할 수 있는 것은 당신의 상태를 직접 되돌리는 것이다.get()제거하다mapState계산된 속성에서

computed: {
    todo: {
        get () { return this.$store.state.todos.todo},
        set (value) { this.updateTodo(value) }
    }
} 

다음은 관련이 있지만 동일하지 않은 JsFiddle의 예를 나타냅니다.

이것이 현재의 회피책입니다.개인 작업 프로젝트에서 복사됨

// 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 바인딩을 사용할 수 있습니다.l

상점을 이용하는 또 다른 접근 방법mutations다음과 같습니다.

//in your component js file:
this.$store.commit('setStoretodo', storetodo)

정의한다고 가정할 때setStoretodovuex 스토어 인스턴스의 돌연변이(어쨌든 권장 사항):

//in your vuex store js file:
state:{...},
actions: {...}
...
mutations: {
    setStoretodo(state, val){
        state.storetodo = val
    },
    ...
}
...

그러면 자산이 반응적으로 유지됩니다.mapState업데이트된 값을 가져오고 자동으로 렌더링됩니다.

물론, 그건 그냥 쓰는 것만큼 쿨하지 않다.this.storetodo = newValue하지만 누군가 그것 또한 도움이 될 것이다.

언급URL : https://stackoverflow.com/questions/44272405/mapstate-with-setter