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里面的数据。