【问题标题】:is it bad practice to access vuex state properties directly (without getters), and why? [closed]直接访问 vuex 状态属性(没有 getter)是不好的做法,为什么? [关闭]
【发布时间】:2017-11-10 20:59:58
【问题描述】:

如果这是我的 store.js 文件:

const state = {
  count: 0,
  loggedIn: false
}

const mutations = {
  UP_COUNT(state) {
      state++;
  }
}

const actions = {
  upCount({ commit }) {
    commit('UP_COUNT');
  }
}   


假设要从我的一个 Vue 组件中增加状态 count,我将调用一个动作,然后提交一个突变:

this.$store.dispatch('upCount');


那么在另一个Vue组件中,我想使用状态计数:

<div class="count">{{ this.$store.state.count }}</div>


这种风格有什么问题? (相对于使用$this.store.getters...)

【问题讨论】:

  • 我认为我对这篇文章的回答提供了一些(尽管我认为是)原因:stackoverflow.com/questions/47191231/…
  • 感谢@webnoob,这是有道理的。我的理解是,如果您获取单个变量就可以了...但是如果需要过滤状态数据并返回,最好在 getter 中执行此操作,这样您就不需要在任何地方复制该过滤器代码调用它。
  • 虽然这个问题可能是基于意见的,但我认为值得对此进行一些思考。肯定遵循最佳实践不是基于意见的吗?所述包的开发者必须有充分的理由使其成为最佳实践。
  • @thanksd - 很公平,谢谢。在这种情况下,我将添加最后的关闭投票。

标签: javascript vue.js vuejs2 getter-setter vuex


【解决方案1】:

正如我在 this post 上指出的那样,您必须做事没有硬性和快速的方法,但最好遵循实践并坚持下去。

使用 getter 可能看起来有点过头了,但是只要 getter 名称保持不变,您就可以使用 getter 在幕后更改数据,这样可以节省大量重构工作并尝试查找对其他地方的所有引用你可能用过this.$store.state.module.someValue

它还允许您将基于多个状态变量的数据返回到一个 getter 中,即

`isAllowed: 'getIsAllowed'` 

可以基于

getIsAllowed (state) {
  return state.loggedIn && state.hasPermission && state.somethingElse
}

您可以在一个地方轻松更改 isAllowed 所基于的内容,而不是使用组件中的每个状态变量并多次执行逻辑。

【讨论】:

  • this 文章使用如下吸气剂:isLoggedIn: state =&gt; state.isLoggedIn。这对我来说没有意义,因为state.isLoggedIn 应该是某种私有财产,因为不清楚使用哪一个。所以我认为 getter 确实只对过滤、映射等有意义,因为我们这里没有类似 OOP 的 getter/setter 机制
  • another article 说的差不多。换句话说,我认为从 vuex 的角度来看,“getters”是一个相当糟糕的术语选择,因为它会导致这样的混乱。抱歉重复评论
猜你喜欢
  • 2021-06-01
  • 1970-01-01
  • 2018-06-11
  • 2021-03-28
  • 2012-08-20
  • 1970-01-01
  • 2015-06-21
  • 2021-09-23
  • 2010-09-26
相关资源
最近更新 更多