Vuex的核心概念和运行机制
Posted 理小理...
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex的核心概念和运行机制相关的知识,希望对你有一定的参考价值。
Vuex的核心概念和运行机制
1、vuex
是什么?
vuex
是一个专为vue.js
应用程序开发的状态管理工具,他采用集中存储的方式来管理程序的所有组件的数据
2、Vuex都有什么核心概念?
state
:用来存储数据。数据类型是一个对象类型。Getters
:借助vue
的计算属性computed
来实现实现缓存,通过Vue
的计算属性实现对state
中的数据做一些逻辑性的操作。actions
:在actions
中只能调用muations
中的方法,是一个异步的muations
muations
:更改Vuex
的store
中的状态的唯一方法就是提交mutions
,Vuex
中的muations
非常类似于事件。可以直接操作state
中的数据。modules
:将仓库分模块进行存储管理。
拓展
在组件中使用vuex
中的state
中的数据时,可以有两种方式。
第一种:
在组件中:
<span @click="quit"> $store.state.users.userName </span>
或者:
<template>
list
</template>
<script>
data()
return
list:[]
created()
this.list=this.$store.state.users.userName
,
</script>
第二种:
在store.js
中
getters:
total: state => state.shopListData,
在组件中:
import mapGetters from '@/store.js'
<script>
computed:
...mapGetters(["total"]),
,
</script>
<template>
total
</template>
3、Vuex
的运行机制
在组件中通过
dispatch
来调用actions
中的方法,在actions
中通过commit
来调用muations
中的方法,在muations
中可以直接操作state
中的数据,只要state
中的数据发生改变就会响应到组件中去。
4、使用场景。
vuex
可以帮我们管理共享状态,并附带了更多的概念和框架,这需要对短期和长期的效益进行权衡。
如果不打算开发大型单页面应用,使用
Vuex
是繁杂冗余的,在小型的项目中我们要适当的使用Vuex
。
5、关于如何异步修改数据
通过
dispatch
调用actions
中的方法,再通过commit
提交调用mumations
中的方法,修改state
数据达到修改数据目的。
以上是关于Vuex的核心概念和运行机制的主要内容,如果未能解决你的问题,请参考以下文章