Vuex 计算属性仅适用于 getter

Posted 2023-02-22

【中文标题】Vuex 计算属性仅适用于 getter

【英文标题】：Vuex computed properties only work with getters

【发布时间】：2018-07-22 23:54:53

【问题描述】：

当我把它放在我的 Vue 组件中时......

// using store getter

computed: 
  authenticated() 
    return this.$store.getters.authenticated
  

...它的工作原理。 authenticated 的值是响应式的，当 vuex 存储中的值为 true 时，计算属性返回 true。

这应该可行...（根据文档，这将是正确的方法）

// using store state

computed: 
  authenticated() 
    return this.$store.state.authenticated
  

...但没有。计算的属性始终为false。

它甚至在初始状态下都不起作用，所以我猜它与动作或突变无关。 vuex 存储在 state 和 getters (Firefox Vue DevTools) 中保存正确的值。

我的商店是这样的：

const state = 
    authenticated: authenticate.isAuthenticated(),
;

const getters = 
    authenticated () 
        return state.authenticated
    
;

const mutations = 
    isAuthenticated (state, isAuthenticated) 
        state.authenticated = isAuthenticated
    
;

因此，它适用于 store getter，但不适用于 store state。 Afaik 商店状态也应该是反应式的。

知道我做错了什么吗？

【问题讨论】：

它有什么作用？ “不起作用”是含糊的。

Getter 接受状态作为参数。你的吸气剂应该是authenticated(state) return state.authenticated。

您是否将状态与 getter、actions 和 mutators 一起导出？

@RoyJ 你是对的，我更新了问题，希望问题现在更清楚了。

@Sletheren 是的，我愿意。

【参考方案1】：

我认为问题不在于使用 getter 或状态。由于 state 运行正确，getter 应该做同样的事情，因为它指向 state。您是否从商店中导出了吸气剂？这似乎是可能的问题。如前所述，使用 vuex getter 时应该将 state 作为参数传递

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

const state = 
   authenticated: authenticate.isAuthenticated(),
;

状态是一个对象。对象中的属性试图调用函数的结果。这可能是问题所在，因为它会要求对象调用函数。尝试先将其设置为固定值，并在需要时通过调用突变来更改状态值。

您也可以尝试调用 js 对象函数调用状态对象内的 authenticate.isAuthenticated() 函数。 详情在这里：https://www.w3schools.com/js/js_function_call.asp

可能的解决方案：

const state = 
   authenticated: function() return authenticate.isAuthenticated() ,
;

【参考方案3】：

除了本次讨论之外，vuex 还提供了 mapGetters、mapState、mapActions 和 mapMutations 辅助函数。

在 authenticated getter 的情况下，您可以像这样映射它：

import  mapGetters  from 'vuex

computed: 
    ...mapGetters(
        authenticated: 'authenticated'
    )

有助于保持代码简洁明了，imo。

【参考方案4】：

假设您像我在下面那样构建您的 Vuex.Store，使用 state.authenticated 或 getters.authenticated 计算的结果将按预期工作。

突变部分没有任何区别，因此我将其取出以使事情最小化。

正如 Bert 所说，你的 getter 应该将 state 作为参数；否则，它使用声明的const，在这种情况下是相同的，但具有欺骗性。

const authenticate = 
  isAuthenticated() 
    return true;
  
;

const state = 
    authenticated: authenticate.isAuthenticated()
;

const getters = 
    authenticated (state) 
        return state.authenticated;
    
;

const store = new Vuex.Store(
  state,
  getters
);

new Vue(
  el: '#app',
  store,
  computed: 
    authenticated() 
      return this.$store.state.authenticated;
    
  
);

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<script src="//unpkg.com/vuex@latest/dist/vuex.js"></script>
<div id="app">
  Anything? authenticated
</div>

【讨论】：

我的问题是，getter 有效，但state 无效。我不明白为什么当状态也应该起作用时我必须使用吸气剂。状态也被导出。

@RicoLeuthold：你解决了这个问题吗？我遇到了同样的问题。即使使用mapState，我也无法让state 工作。