Vue/Vuex에 mapStateToProps와 같은 리액션/리듀스가 있습니까?

Vue/Vuex에 mapStateToProps와 같은 리액션/리듀스가 있습니까?

React/Redux에서 상태 및 액션을 매핑하는 일반적인 방법은 다음과 같습니다. 따라서 매핑 함수는 컴포넌트 코드와 별도로 배치됩니다.

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import myAction from 'actions/request';

class MyComponent extends Component {
  /* BODY */
}

function mapStateToProps(state) {
  return {
    myComponentProp: state.myReducer.myReducerProp
  };
}

function mapDispatchToProps(dispatch) {
  return {
    myComponentPropAction: bindActionCreators(myAction, dispatch),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

Vue에서 찾은 상태 및 작업을 매핑하는 유일한 방법은 다음과 같습니다.

import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('myReducer', {
      myComponentProp: (state) => state.myReducerProp,
    }),
    ...{
      /* aditional manipulations with this.myComponentProp */
    }
  },
  methods: {
    ...mapActions('myReducer', [
      'myReducerAction'
    ]),
    ...{
      myEventHandler: function() {
        /* checke conditions before action call */
        this.myReducerAction();
      },
    }
  }
}

확산 횟수로 인해 코드가 흐릿해 보이므로 질문은 다음과 같습니다.mapState그리고.mapActions외부 컴포넌트(react/internal approach)의 일반적인 접근 방식처럼

도와줘서 고마워요!

자, 타이프스크립트 지원과 함께 vue-class-component decorator에도 추가되어 나중에 사용할 수 있습니다.저장소 링크는 여기에서 찾을 수 있지만 CLI를 통해 새 프로젝트를 만들고 v3 Vue Class Component Github Repository에 추가된 프로젝트를 시작하는 것이 좋습니다.

<script>

function Getter (getterType) {
  return createDecorator((options, key) => {
    if (!options.computed) options.computed = {}
    options.computed[key] = function () {
      return this.$store.getters[getterType]
    }
  })
}

import Vue from 'vue'
import Component from 'vue-class-component'

    @Component({
      props: {
        propMessage: String
      }
    })
    export default class App extends Vue {
    @Getter('foo') bar
    @Setter('psu') psi

      // computed
      get computedMsg () {
        return 'computed ' + this.msg
      }

      // method
      greet () {
        alert('greeting: ' + this.msg)
      }
    }
    </script>

보다시피 최적의 함수는 아니지만 풍부한 답변에 가까운 기능을 사용하여 getters와 setters를 호출하고 있습니다.이제 vuex-class-binding 패키지가 출시되었습니다.vuex class는 모든 흐릿한 함수를 추상화합니다.

import Vue from 'vue'
import Component from 'vue-class-component'
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'

const someModule = namespace('path/to/module')

@Component
export class MyComp extends Vue {
  @State('foo') stateFoo
  @State(state => state.bar) stateBar
  @Getter('foo') getterFoo
  @Action('foo') actionFoo
  @Mutation('foo') mutationFoo
  @someModule.Getter('foo') moduleGetterFoo

  // If the argument is omitted, use the property name
  // for each state/getter/action/mutation type
  @State foo
  @Getter bar
  @Action baz
  @Mutation qux

  created () {
    this.stateFoo // -> store.state.foo
    this.stateBar // -> store.state.bar
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
    this.moduleGetterFoo // -> store.getters['path/to/module/foo']
  }
}

이 예시는 이름붙인 모듈을 사용하여 모든 게터 및 세터를 호출할 수 있기 때문에 매우 편리합니다.이러한 커스텀 함수는 필요 없습니다.사용 가능한 모든 것을 Import 할 수 있습니다.const위와 같이.이제 데코레이터만 사용하여 모든 모듈 기능에 액세스할 수 있습니다.이것은 컴포넌트에 기능을 할당할 수 있는 것에 매우 가깝습니다만, 모든 것을 설정해 두면 매우 보기 좋습니다.이것은 TS 유무에 관계없이 할 수 있다고 생각합니다만, 저는 항상 TS에서 해 왔습니다.이는 아직 비교적 새로운 vue 클래스의 컴포넌트에 대한 퍼스트 클래스 지원이 있기 때문입니다.

언급URL : https://stackoverflow.com/questions/51617463/is-there-react-redux-like-mapstatetoprops-way-in-vue-vuex