Vuex初体验(基础使用教程)

152 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情

第一次参加更文活动,实在想不到写什么,就把能想到的平时用的比较多的东西尽可能拿出来当做自己学习,当做是自己的学习笔记。

Vuex是什么

Vuex是一个状态存储的仓库store,通过一个仓库一样的容器保存开发中页面的各种状态,响应式的存储可以让状态的更新和提取变得高效率,各个组件之间需要传递的值都统一放到一起。更新和提取的方式也不同于简单的全局对象,需要通过commit/mutation等操作去跟踪每一个状态,从而数据的准确响应。


Vuex原理

Vuex的双向绑定通过调用 new Vue实现,然后通过 Vue.mixin 注入到Vue组件的生命周期中,再通过劫持state.get将数据放入组件中


Vuex用途

Vuex主要用于大型vue项目的开发中使用,由于vue使用的是组件化开发,所以日常开发中常常会遇到不同组件之间传值的需要,最常见的组件传值如下:

  • 父子组件间传值
  • 兄弟组件间传值 这俩个只是简单的传值方式,其实开发中也比较常遇到就是俩个毫无关系或者关系比较复杂的组件的传值,如果按照简单的父子和兄弟间找到传递关系进行传值,则会影响开发效率,也会让整个代码结构比较乱。简单的应用开发,Vuex的使用可能会让系统变得更复杂,eventbus可能已经能够满足需求,但在中大型单页开发中,使用Vuex可以更加方便组件间状态的管理,并且能通过Vuex的api对所有状态当做模块管理,更加符合模块化的规范。

主要属性

  • state:是全局状态存储,只读不能修改,所有状态都存储在其中
  • getter:是对存储的数据进行加工,主要是用于对状态中的数组进行过滤的作用,比如从一个数组中找到某个id的对象 image.png
  • mutations:可以理解为包含了对数据做处理的函数,通过commit触发mutations中的函数执行函数中的内容对数据进行修改,
  • actions:和mutation比较相似,但mutation是直接对数据进行处理,可以理解为调用了函数,但action是一个类似于异步调用的过程,action 提交的是 mutation,而不是直接变更数据状态,action可以包含任意异步操作对mutation进行异步调用。

image.png