getter 및 setter와 함께 localcomputed 함수의 Vuex 구문 오류

getter 및 setter와 함께 localcomputed 함수의 Vuex 구문 오류

Vuex localcomputed 객체를 get/set과 스토어 매핑을 조합하면 구문 오류가 발생합니다.

Vuex 문서에서 볼 수 있듯이 다음과 같이 객체 확산 오퍼레이터를 사용하여 스토어 메서드를 매핑할 수 있습니다.

computed: {
  localComputed () { /* ... */ },
  // mix this into the outer object with the object spread operator
  ...mapState({
    // ...
  })
}

https://vuex.vuejs.org/en/state.html # # 객체 확산 기능

또한 다음과 같은 계산 세터를 작성할 수 있습니다.

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

https://vuejs.org/v2/guide/computed.html#Computed-Setter

get을 사용하여 계산 개체를 만들거나 mapState/mapGetters 등을 사용하여 계산할 수 있지만 조합으로는 만들 수 없습니다.구문이 깨집니다(오류: 함수 선언 뒤에 예상되는 함수 이름).

    computed: {
        localComputed () {
            localMethod: {
                get: function () {
                        // retrieve
                },
                set: function (newContent) {
                    // set
                }
            }
        }, ...mapState([

                       ]), ...mapGetters([])

    }

이 둘을 어떻게 조합하면 좋을까요?

localComputed 내부에 localMethod를 정의하려고 합니다.

문서에서 localComputed는 컴포넌트 내 계산된 속성의 예시 이름일 뿐입니다.다른 모든 로컬 계산 속성을 여기에 넣을 필요는 없습니다.

따라서 다음 작업을 수행할 수 있어야 합니다.

computed: {

  localComputed: {
    get: function () {
      // retrieve
    },
    set: function (newContent) {
      // set
    }
  },

  anotherLocalComputed: {
    get: function () {
      // retrieve
    },
    set: function (newContent) {
      // set
    }
  },

  ...mapState([]),

  ...mapGetters([])

}

여기 작업용 샘플이 있습니다.저는 이 방법을 1년 이상 사용해 왔습니다.

// 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/47463368/vuex-syntax-error-with-localcomputed-function-in-combination-with-getter-and-set