直接访问vuex状态属性(没有getter)是不好的做法,为什么?

时间:2017-11-10 20:59:59

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

如果这是我的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>


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

1 个答案:

答案 0 :(得分:7)

正如我在this post指出的那样,必须做事情并没有多么艰难和快捷的方式,但是遵循惯例并坚持下去是最好的。

使用getter似乎过度杀戮但只要getter名称保持不变就可以使用getter更改幕后数据,这样可以节省大量工作重新分解并尝试查找所有对其他地方的引用您可能在哪里使用this.$store.state.module.someValue

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

`isAllowed: 'getIsAllowed'` 

可以基于

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

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