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

标签 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,我将调用一个 Action ,然后提交一个突变:

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


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

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


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

最佳答案

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

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

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

`isAllowed: 'getIsAllowed'` 

可以基于

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

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

关于javascript - 直接访问 vuex 状态属性(没有 getter)是不好的做法,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47231044/

相关文章:

javascript - 获取存储在谷歌地图标记的附加字段中的数据

javascript - 如何在 Vue 上下文中动态向条形图/饼图添加点?

javascript - 如何使用 Vue.js 在单击时更新特定的子元素?

javascript - 如何从代码隐藏调用 .aspx 页面中的书面函数

java - 使用 javascript 动态添加重复(唯一 ID)表单 Div 元素

javascript - Vue JS - 如何将颜色应用于数组中特定元素的文本,然后删除最后一个逗号

javascript - VueJS 组件 DOM 在 AJAX Promise 后未更新

javascript - 如何在vuejs中以编程方式动态创建组件并返回值

vuejs2 - VueJs 获取url查询

vue.js - 调试 Vue 运行时错误的技巧