vuex 介绍

介绍

官方解释

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 + 。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

一句话理解

vuex是插件,可以实现 多个组件 间的 数据共享

如:A、B、C 三个组件,共用数据 nickname,当 A 组件通过 vuex,将 nickname 改成 李雷 ,那么 B、C 组件也会显示 李雷

应用场景

多个 组件间 共享数据
大型 vue 项目,才能体现 vuex 的优点;如果是简单项目,反而显得 vuex 复杂。(相当于 运算复杂的天体运动,需要用电脑;计算 1+1 ,用人脑就够了)

中小型 vue 项目,用其他方式也可以实现 数据共享,而且更简单,但功能也会受限

特点

Vuex 的状态存储是 响应式,上图中,一旦修改昵称,右上角的 李雷 立即会改变

组成

组件

普通的组件,不需要额外处理

组件 通过 dispatch() 触发 Actions 中的函数

store

使用时,要先创建 store 对象,将 ActionsMutationsState 定义在 store 对象中

Actions

Actions 内都是 自定义函数

类比:Actions 相当于 Servlet,可以做校验、向后端发送请求等,只能通过 DbUtil 操作数据库

Actions 中的函数,通过调用 commit() ,触发 Mutation 中的函数

注意: 不能操作 State

提示:根据具体情况,也可以 没有 Actions组件 通过调用 store.commit() ,触发 Mutation 中的函数

Mutations

Mutations 内都是 自定义函数,函数内可 直接操作 State 中的数据

类比:相当于 DbUtil,可直接操作数据库

State

状态,用于存储数据

类比:相当于数据库


原文出处:http://malaoshi.top/show_1IX2rA3U4LbW.html