关于vue状态管理工具的二三事-----state篇

vue项目中，state是其中很重要的一环。它是作为整个状态管理工具的基石出现。现在我们就来说一说state的基本用法吧，它的使用过程基本上就是声明、使用以及修改。
在组件中的使用方式：
在页面中使用之前我们要先引入vuex的文件，具体的引入方法不在赘述

export default new Vuex.Store({
    state: {
        count: 1000,
        localCount:50,
        msg: '这是一条消息',
        show: true,
        todos: [{
                id: 1,
                text: '今天要好好的敲代码',
                done: true
            },
            {
                id: 2,
                text: '今天要好好的学习ES6',
                done: false
            },
            {
                id: 3,
                text: '今天要好好的学习vue',
                done: true
            }
        ]
    }
})

以上就是在vuex中的state的基础声明，实际项目这些数据一般都是先声明，然后在接口中获取到值后，再进行赋值。当然了，有时候页面中可能存在多个模块，最后再进行整合（后话，在这儿也没啥用，纯粹就是提一下《手动开心，哈哈》）。
接下来就是state在页面中的使用：

computed: {
     getData(){
          return this.$store.state.count
      }
}

至于为什么要在computed中去调用函数区state的值。则是因为store中的状态是响应式的，而computed中的函数只有在值发生变化时，才会去重新调用，一般不变的时候，都是直接从缓存中直接拿出来使用。
当然，在实际的项目中，我们在state中的值可能会很多，多以这么写会很繁琐，这时候，我们一般会采用一种更为简单的写法，引入vuex中的mapState来取值。
具体的使用方法如下：

import { mapState } from 'vuex';

computed: mapState({
    count: state => state.count,
    // 传字符串参数 'msg' 等同于 `state => state.msg`,重命名了msg
    message: 'msg',
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

当我们的computed中获取的数据的名字和state中声明的一样时，我们可以采用根伟简便的写法：

computed: mapState(['count','localCount','msg','show']);

但是，在平时的开发过程中，计算属性不光有state中取到的状态，还有单文件组件自己内部的计算属性…，遇到凡事不要慌，先打开文档查一查。咦，你会发现可以用这用方式来写：

computed: {
  localComputed () {/**代码片段**/},
  // 使用对象展开运算符将此对象混入到外部对象中，(...)扩展运算符属于es6的操作。
  ...mapState({
    
  })
}

最后，我们就说一说关于state修改的问题，其中涉及了mutation的操作的相关知识，我们就放在下一篇文章中介绍，我们下期不见不散！！！

欢迎大家一起交流。