Question

我尝试使用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”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保在data选项中或对于基于类的组件，此属性都是反应性的。参见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

预先感谢

Answer 1

下面是使用非根属性的正确语法（使用箭头功能）：

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

检查documentation。

Answer 2

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

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

Answer 3

您可以mapState模块，然后使用this.auth.isLoggedin

Vue mapState非反应性

3 个答案: