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

Question

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

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

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

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

让我们说count从我的一个Vue组件中增加状态,我将调用一个动作然后提交一个变异:

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

然后让我们说在另一个Vue组件中,我想使用状态计数:

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

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

Answer 1

正如我在这篇文章中所指出的那样,你必须做一些事情并不是很快,但是遵循一种做法并且最好.

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

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

`isAllowed: 'getIsAllowed'` 

可以基于

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

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