当前位置 : 首页/建站知识/网站建设教程/vuex的五个属性及使用方法

vuex的五个属性及使用方法

发布时间:2021年8月28日 14:01 作者:誉新源

Vue的StateManagement(状态管理):Vuex,我们在构建大型应用程序时对StateManagement的处理非常重要。


一、Vuex简介。


由于业务的增长,应用程序也变得越来越复杂,每个组件都有自己的数据状态,加上各组件之间的数据传递问题,一个数据的变化会影响到多个组件的连锁反应,这就增加了定位的难度。
所以要解决上面的问题,我们就要对数据进行集中管理,在多个组件共享数据状态——比如用户的登录信息或者UI组件的呈现状态(按钮禁用或载入数据)。


幸好,StateManagement并不需要手动操作,很多流行的框架可以帮助我们管理数据状态,您可能听说过Redux,它是React生态圈中较为流行的状态管理解决方案。Vue当然也有自己的官方解决方案,称为Vuex。它们的共同点是帮助我们集中管理数据状态,以及所有不需要的父子关系的组件,并且可以轻松地在数据间进行交互。


二、vuex的五个属性


那么如何使用Vuex呢?用之前,我们先看一下下面的图,这张图很好地解释了Vuex的工作原理,理解了这张图,你就可以很快上手使用Vuex了。
要了解Vuex,必须理解以下概念:


State


完整的应用数据中心,应用的相关组件获取数据或更新数据,是整个应用程序的唯一数据中心。
 

Store


只有外部组件不能直接对State进行更改,数据中心管理员只能依靠dispatchaction(行为调度)或commitamutation(提交mutation)间接操作。

 

Getters


Getters的本质在于Vuexstore的computed属性,读取store/state的内容,Getters中的数据将被缓存,并且在数据更新时它所依赖的相关组件状态也会及时更新。


Mutations


当在应用程序中共享全局数据状态时,由于数据变化可能来自任何组件,因此难以定位和跟踪数据的状态。
所以Vuex建议用Mutations的方式改变数据,而不是直接进行修改,它的Vuedevtools工具非常精确地帮助我查找更改和修改的时间。
如果您使用过Redux,Mutations的概念与reducer非常相似,它的作用是改变数据状态。


Actions


当要执行一个异步任务或多个相关Mutations来更新数据状态时,我们需要Actions定义用于操作的函数,其中的第一个参数context可以获得相关属性,commit和getters,从而便于组织定义更复杂的逻辑。Actions是我们常用的接口数据请求获取数据,Actions经常被使用。


以Store/State为结束,我们使用了Store/State来定义和管理应用的核心数据,通过Compute属性在组件中调用来自Getters的数据,如果我们要操纵数据,我们可以调用注册的Actions方法,然后Actions调用相关的mutations来对数据操作。


三、Vuex的使用方法


下面我们自己来做一个简单的练习,通过代码进一步了解Vuex,废话不多说,我们开始吧!


1.安装Vuex。


假定我们通过CLI工具创建一个Vue项目(使用缺省预设),如果我们要使用Vuex来安装相关依赖项,安装命令如下:
npminstallvuex。


依赖性安装完成之后,需要注册Vuex实例,然后在src目录中新建一个store.js,示例代码如下:


src/store.js。
importVuefrom"vue";importVuexfrom"vuex"vuex"vuex"vuex"vuex"vuex"vuex"vuex"vuex"vuex:{state:{},mutations:{},活动:{}});
将一个包含state、mutations和actions这些核心属性传递到Vuex.store构造函数中的对象,不必担心,我们将逐步实现,接下来我们打开main.js文件,在Vue实例中进行注册,示例代码如下:


src/main.js。
importVuefrom"vue";importAppfrom"./App.vue";importstorefrom"./store";Vue.config.productionTip=false;newVue({store,render:h=>h(App)}).$mount("#app");
在以上步骤完成之后,我们可以通过this.$store轻松地访问store实例的内容。


2、初始化状态中的数据。


State本身是一个JS对象,创建的数据可以在不同的组件中共享,例如,初始化购物车的数据,示例代码如下:


exportdefaultnewVuex.Store({state:{customerName:'JohnSmith',shoppingCart:[{name:'JumboBoxofTeabags',quantity:1,price:350},{name:'PacketofFancyBiscuits',quantity:1,price:199},]};


status属性的值可以包含任意有效的数据类型,接下来我们可以使用computed在组件中获取数据,例如,我们要获得客户的名字,示例代码如下:


上面的代码是通过store实例获取数据的,您可能会觉得这样获取有些冗长,Vuex提供了一种工具函数来方便地获取store实例的数据。


对于mapState方法,示例代码如下:


mapState()方法使用了新的ES6语法..,帮助我们从State获得数据,您只需传递函数中对应的State属性值,这就很简单了。


3、获取Getters中的数据。


Getters的本质就是Vuexstore的computed属性,它允许您在不同组件之间共享数据状态,正如组件的computed属性一样,其中的数据将被缓存,当数据发生变化时,进行动态计算,并实时反馈。
例如,我们要获得购物车中商品的种类,样本代码如下:


exportdefaultnewVuex.Store({state:{shoppingCart:[//...]},getters:{cartItemCount:state=>state.shoppingCart.length}});


使用组件中的getter方法获得store/state,我们需要创建用于调用的computed属性,示例代码如下:


而Vuex提供了一种更方便的mapGetters()方法。

相关文章