这篇文章将为大家详细讲解有关利用vuex怎么对数据进行渲染,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
<强> 1。vuex是什么?
用官方的话来说“vuex就是一个专为Vue。js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化”。而说的通俗易懂点就是“你想要在不同的组件中使用同一份数据,并且在不同的组件中都可以实时修改它并且这份数据保持同步”。
<强> 2。如何使用状态中的数据
在你创建好存储这个仓库之后,并且在其中添加了相应的数据以及修改它的方法,你就可以在你的组件中使用这个仓库了。比如我们的商店是这样最简单的一中:
在组件中渲染中存储的数据
1。通过<代码>。美元商店> & lt; p>{{数}}& lt;/p>
2。这时我们就需要在这个组件中获取中存储的数据了。我们可以直接在本组件的计算属性计算中获取
3。然后标页签中的数就会渲染出商店中的计数的值0了。
如果你觉得这样写太麻烦了,我们就可以使用vuex的辅助函数mapState
在使用这个辅助函数之前我们需要引入这个辅助函数
<代码>进口{mapState} & # 39; vuex& # 39;
最后同样是在计算属性中使用它,<代码>…mapState ([“count"])> …mapState ([“count",“count1",…])>
<强> 3。如何修改状态中的数据
首先我们要知道,官网虽然说修改状态中的数据唯一方法就是提交突变。但是我们也可以直接修改状态中的数据,列如<代码> store.state美元。数=1>
言归正传,如何提交突变了?
1。创建一个方法来提交突变,比如最简单的点击事件触发某个方法,然后这个方法来提交突变。<代码> & lt;按钮@click=疤砑?)“在+ + + & lt;/button>
在vuex中提交突变的方式就是使用<代码>。美元store.commit() 方法,这个方法的参数就是你在商店中的突变中所写的你需要调用的方法,例如上图我们在突变中创建的添加方法,让数自增,所以完整的写法就是在添加方法中:<代码>。美元store.commit(& # 39;添加# 39;)> 。美元store.commit(& # 39;添加# 39;)方法来修改中存储的数据。
如果你觉得这样也麻烦,同样有辅助函数来帮助你,还是一样,先引入这个辅助函数
<代码>进口{mapMutations} & # 39; vuex& # 39;
然后在本组件的方法中调用它
<代码>…mapMutations((& # 39;添加# 39;]),> & lt;按钮@click=疤砑?)“在+ + + & lt;/button>
关于利用vuex怎么对数据进行渲染就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
