去掉 Vue 自定义组件中的 vuex 属性, mapGetter 回来的 state 内容应该放到 data 里面还是 computed 里面呢?

2017-04-12 16:00:16 +08:00
 gap

之前项目用的是 vuex 0.x 版本,每个自定义组件中的 state 都是在组建 vuex 属性里面返回的,类似:

  vuex: {
    getters: {
      currentPeriod: state => state.currentPeriod
    },
    actions: {
      changeCurrentPeriod
    }
  }

升级 vuex 2.x 后,看教程的 sample 都没有用 vuex 属性了,直接在 component 的 computed 的方法中,用 mapGetter 来取 state 中的值,类似:

computed: mapGetter(['currentPeriod'])

我的问题是,拿到所有情况下都将 mapGetter 的 state 内容放在 computed 对象上?data() { return {} } 好像不支持 mapGetter 。

另外,有用了 vuex 2.x 后,自定义组件还保留了 vuex 属性的例子吗?看了一圈 github 的些 vue + vuex 2 项目都用的 mapGetters 和 mapSetters 。

9236 次点击
所在节点    Vue.js
4 条回复
445141126
2017-04-12 16:08:16 +08:00
mapState, mapGetters 放在 computed, mapActions, mapMutations 放在 methods
gap
2017-04-12 16:14:46 +08:00
@445141126


我现在遇到个问题, data 中用到的 state 返回了 undefined ,貌似是 computed 属性返回慢了一步?

```js
data() {
return {
selectedPeriod: this.currentPeriod // view 中访问 this.selectedPeriod.from 报错
}
},
computed: mapGetter(['currentPeriod'])
```
445141126
2017-04-12 17:07:43 +08:00
对, 你可以在 created 里面再给 data 赋值
gap
2017-04-12 23:35:36 +08:00
@445141126 您的意思是这样吗?感觉好丑...

```
computed: {
...mapState({
currentArea: 'currentArea'
})
},

mounted() {
// 原本这个赋值逻辑应该是在 data() 属性中的,但 data() 属性赋值的时候 this.currentArea 还是 undefined
this.$data.selectedArea = this.currentArea
}
```

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/354378

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX