Vue mapState 非反应式答案

【问题标题】：Vue mapState non reactiveVue mapState 非反应式
【发布时间】：2018-12-25 17:43:33
【问题描述】：

我尝试使用 mapState 函数从商店获取状态，但我无法使用生成的代码将值返回到我的模板代码中...

<template>
         // Some code
                <template v-if="!isLoggedIn">
                    // Some code
                </template>
                <template v-else>
                    // Some code
                    {{ currentUser.name }} 
                </template>

        // Some code
</template>

<script>
    import { mapState } from "vuex";

    export default {
        // Some code
        computed: {
          ...mapState({auth : ['currentUser', 'isLoggedIn','customers']})
        }
    }
</script>

下面的代码可以工作

<script>
    import { mapState } from "vuex";

    export default {
        // Some code
        computed: {
          currentUser() {
                return this.$store.state.auth.currentUser
            },
            isLoggedIn() {
                return this.$store.state.auth.isLoggedIn
            },
        }
    }
</script>

警告信息

[Vue 警告]：属性或方法“isLoggedIn”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

提前致谢

【问题讨论】：

我们需要看看你的 Vuex store 和模块的基本结构。请和谢谢！

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

访问非根属性的正确语法如下（使用箭头函数）：

computed: {
...mapState({
  currentUser: state => state.auth.currentUser,
  isLoggedIn: state => state.auth.isLoggedIn,
  customers: state => state.auth.customers
})}

检查documentation。

【讨论】：

【解决方案2】：

如果您尝试从名为 auth 的命名空间 vuex 模块访问值，请将模块名称作为第一个参数传递，将要映射的值数组作为第二个参数传递：

computed: {
    ...mapState('auth', ['currentUser', 'isLoggedIn','customers'])
}

【讨论】：

Afaik 不行，这个语法适用于 mapActions，但不适用于 mapState
@Aldarund 该语法确实适用于mapState。然而，决定因素是模块是否被命名空间。它不适用于非命名空间模块。
@aaronofleonard 嗯，对，刚刚检查过，它可以工作。但我在文档中没有看到这样的例子-> vuex.vuejs.org/guide/…
@Aldarund 是的，文档似乎没有。我试图找到一个关于这个的链接来输入我的答案。

【解决方案3】：

你可以 mapState 模块然后使用，比如this.auth.isLoggedin

【讨论】：