Reactjs Vue/Vuex中是否有类似mapStateToProps的react/redux方式

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/redux通常的方法一样

---

谢谢你的帮助

好的，除了typescript支持之外，他们还添加了一个vue类组件装饰器，可用于实现您的目标。可以在这里找到指向该存储库的链接，但我建议改为通过CLI创建一个新项目，并在v3中添加该项目

---

这是一个很好的例子，因为我们能够使用一个带名称空间的模块并调用它的所有getter和setter，而不需要任何讨厌的自定义函数，我们可以将所有这些导入到一个

常量中，就像上面所说的那样。现在，您只需使用装饰器就可以访问所有模块功能。不幸的是，这离将您的功能分配到组件已经很近了，但是一旦您完成了所有的设置，它看起来就相当不错了。我想你可以使用TS或不使用TS来实现这一点，但我一直都是在TS中实现的，因为它对vue类组件提供了一流的支持，而vue类组件仍然相对较新。
使用本机功能性的
vue组件来实现这一点并不是真的可行。
我可能还建议，在vue内部，这实际上是一种反模式。getter和setter的效率非常高，如果您真的想使用react/redux查找这些组件，也许是时候使用与TS一起发布的完整ES6/7 Vue组件了。谢谢，在哪里可以获得更多信息？我想如果我已经通过vue cli创建了应用程序，并且在向导中选择了babel，那么babel已经在我的项目中正确配置了吗？我在哪里可以找到巴贝尔配置来查看它？谢谢你的帮助！我会很快看看是否能找到es7 github，我会把它作为一个答案提前道歉，但它并不完全相同，但我认为它更好。希望我的回答能揭示一些你可能不知道的事情：-）
<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>

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']
  }
}