vuex下state中的函数使用问题（小问题）

场景重现：笔者在 vuex module下定义了一个名为 authen 的状态模块，里面存放着关于身份认证的一些处理函数。考虑到这些函数需要在很多模块中使用到，所以把它们放到了 vuex 中。

import authenTools from 'identity_authentication.js'
new vuex.store({
    module:{
        authen:{
            state:{
                ...authenTools
            }
        }
    }
})

在别的组件中，我是这样使用的。

// login.vue
import {mapState} from 'vuex'
export default {
    methods:{
        ...mapState(
            {authentication:state=>state.authen.authentication}
        ),
        loginHandler(){
            this.authentication() // 进行身份认证
        }
    }
}

问题就出现在this.authentication()身份认证函数调用上。

该函数的返回值超出了我的预期。我就开始慢慢排错...

考虑过是不是我写错了、是不是module.authen模块状态的问题。自己能够想到的位置全部检查了一遍，还是没有找到出哪里出现了问题。然后我就想通过搜索引擎找找前辈们踩得坑，然而并没有找到（可能也就像我这种菜鸟才会这样使用 vuex）。

后来我就借助vue devetool查看了authentication的函数状态。发现开发工具展现给我的代码并不是我写的代码。我就结合之前 vuex 的使用，大胆的猜测起来。

之前我使用 vuex 通过 mapState 将状态数据映射到了其他组件。映射后的值并非是原始的状态值，而是经过包装后的状态值就类似getter一样。

想到这里，我就将身份认证的调用写成了这样this.authentication()()没想到 bug 就解决了...

还是我太菜了，写的代码太少了...

总结：通过mapState映射过来的状态并非是不变的，而是经过包装后的产物。把映射过来后的状态值当作普通属性、对象、数组那样使用是没有问题的，如果映射过来的是函数，并且要调用该函数，那就需要小心了。不要犯跟笔者一样的低级错误。

笔者非常的菜，这是笔者发的第一篇文章。在问题的阐述上、文章的篇幅上、有用的信息上可能存在很大的问题。笔者非常乐意接受各位前辈的批评、指点，但还请轻喷。