vuex及多组件状态集参数请求
vuex是vue的状态管理模式，用来管理大型项目中的状态，一些小型项目是不建议使用的，比如一个项目就登陆信息，十个页面建议还是不要使用vuex 的。话不多说，下面来看下vuex：
一般状态集安装成功后，会自动生成store目录，以及下面的index.js
这里面的index.js一般用来放我们仓库中所需要的一些数据：
这里，我将每个状态，都新建了一个文件，重新生成了目录：
新建完成目录后，要重新编辑index.js将刚刚建立的文件进行导入：
建立的js文件下都要加上导出代码，使它们之间产生联系
export default{
}
下面看一个例子：
首先在state.js中先生成两个状态：
我们一般正常的去拿状态集的数据直接通过$store进行获取就可以如下：
这样就访问到了。我刚刚定义的两个状态，但这不是今天的重点。
那么重点来了，我们在最上面图中看到了，我们除了vuex这些基本的参数外，还有一个modules ，这个其实是用来定义子模块仓库的。一般我们的状态集，存放的是项目的所有状态，但是如果状态过多的话，就会很乱，也不方便维护，这个时候就要用到modules，它可以把我们项目中某个组件的状态单独的建立一个仓库，进行管理，这样也方便维护，下面来看如何使用：
首先我们要在store下新建一个目录modules,在目录中创建一个js 文件，这里用user.js代替。（代表我们的单个组件的状态库）
对user.js进行编辑
export default{
namespaced: true, //使用命名空间
state:{
userName:'网络在这里啊' //单个组件定义的数据
},
getters:{
},
mutations:{
},
actions:{
}
}
找到我们想使用数据的组件：
<script>
import { createNamespacedHelpers } from 'vuex' //先从vuex中解构出来
let { mapState } = createNamespacedHelpers('user') //通过解构将他取出来，这里代表的是拿到user的命名空间
export default {
computed:{ //通过计算属性，采用扩展运算符，展开mapState里面的userName
...mapState([
'userName'
])
}
}
</script>
在我们的template中使用：
<template>
<div id="app">
{{userName}}
</div>
</template>
效果如下：
这样对于分组件状态管理数据我们就拿到了。
但是一般我们我们使用vuex都使用它的辅助方法来进行操作，不然逐一的访问就会变成这样
{{$store.state.name}}
{{$store.state.age}}
这样看是不是很繁琐，好在vuex为我们提供了完美的解决方案
vuex的辅助方法:
mapState
组件里应用：
<template>
<div id="app">
{{lesson}}
{{room}}
{{userName}}
</div>
</template>
js应用：
import { mapState} from 'vuex' //解构
export default {
computed:{
...mapState([ 'lesson','room']) //展开获取state响应式的数据
//...mpaState({aaa:state=>state.lesson}) //这种方式还可以对状态值重新命名，但是不推荐，因为代码会比较多。
//我们上面说的，分组件取值，其实也有一种简单方法如下：
...mapState('user',['userName'])
}
}
上面方法可以自行测试。这里就不贴了。
这样就可以方便的取到我们状态集state里面的数据。
