一、初识VueX 1.1 关于VueX VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。
1.2 安装 由于VueX是在学习VueCli后进行的,所以在下文出现的项目的目录请参照VueCli 2.x构建的目录。
以下步骤的前提是你已经完成了Vue项目构建,并且已转至该项目的文件目录下。
Npm安装Vuex
二、VueX中的核心内容 在VueX对象中,其实不止有state,还有用来操作state中数据的方法集,以及当我们需要对state中的数据需要加工的方法集等等成员。
成员列表:
state 存放状态 mutations state成员操作 getters 加工state成员给外界 actions 异步操作 modules 模块化状态管理 2.1 VueX的工作流程 Vuex官网给出的流程图 首先,Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时,需要dispatch VueX中actions的方法,以保证数据的同步。可以说,action的存在就是为了让mutations中的方法能在异步操作中起作用。
如果没有异步操作,那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。注意,1.3.3节中有提到,不建议在组件中直接对state中的成员进行操作,这是因为直接修改(例如:this.$store.state.name = ‘hello’)的话不能被VueDevtools所监控到。
最后被修改后的state成员会被渲染到组件的原位置当中去。 2.2 Mutations mutations是操作state数据的方法的集合,比如对该数据的修改、增加、删除等等。
2.2.1 Mutations使用方法 mutations方法都有默认的形参:
([state] [,payload])
state是当前VueX对象中的state payload是该方法在被调用时传递参数使用的
2.2.2 Mutation传值 在实际生产过程中,会遇到需要在提交某个mutation时需要携带一些参数给方法使用。