vuex基本介绍

介绍:多个组件间需要传递参数或状态时,用vuex是方便的。

State  储存初始化数据

(1)State负责存储整个应用的状态数据,一般需要在使用的时候在跟节点注入store对象,后期就可以使用this.$store.state直接获取状态

(2)在组件中使用的过程中,如果想要获取对应的状态你就可以直接使用this.$store.state获取,当然,也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去


Getters   对State 里面的数据二次处理

有些状态需要做二次处理,就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。

或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。


Mutations  对数据进行计算的方法全部写在里面(类似computed)

Mutations的中文意思是“变化”,利用它可以更改状态,本质就是用来处理数据的函数,其接收唯一参数值state。this.$store.commit('mutationName')是用来触发一个mutation的方法,改变state的值。需要记住的是,定义的mutation必须是同步函数,否则devtool中的数据将可能出现问题,使状态改变变得难以跟踪。


Actions  处理Mutations中已经写好的方法

Actions也可以用于改变状态,不过是通过触发mutation实现的,重要的是可以包含异步操作。其辅助函数是mapActions,也是绑定在组件的methods上的。如果选择直接触发的话,使用this.$store.dispatch(actionName)方法。


Modules 模块

由于使用单一的状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂,store对象就会变得非常臃肿;为了解决这个问题,Vuex允许我们将store分隔成模块(module),每个模块拥有自己的state,mutation,action,getter,甚至是嵌套子模块

猜你喜欢

转载自blog.csdn.net/xiasohuai/article/details/80677608
今日推荐