Vuex 计算属性仅适用于 getter

Question

当我把它放在我的 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 商店状态也应该是反应式的。

知道我做错了什么吗？

Answer 1

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

Answer 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() },
};

Answer 3

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

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

import { mapGetters } from 'vuex

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

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

Answer 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>