1.vuex是什么?
用官方的话来说“Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化”。而说的通俗易懂点就是”你想要在不同的组件中使用同一份数据,并且在不同的组件中都可以实时修改它并且这份数据保持同步“。
2.如何使用state中的数据
在你创建好store这个仓库之后,并且在其中添加了相应的数据以及修改它的方法,你就可以在你的组件中使用这个仓库了。比如我们的store是这样最简单的一中:
在组件中渲染store中的数据
1.通过this.$store来访问store中的state数据,比如我们在页面中使用一个p标签,在里面渲染store中的state中的数据,
{ {count}}
,此时这个count应该如何从store中拿出来了?2.这时我们就需要在这个组件中获取store中的数据了。我们可以直接在本组件的计算属性computed中获取
3.然后p标签中的count就会渲染出store中的count的值 0 了。
如果你觉得这样写太麻烦了,我们就可以使用vuex的辅助函数mapState
在使用这个辅助函数之前我们需要引入这个辅助函数
import {mapState } from 'vuex'
最后同样是在计算属性中使用它,...mapState(["count"]) ,这样同样可以达到上面的效果,如果有多个数据,那就直接在这个数组后