一丶Vuex简介
官方介绍:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
它采用【集中式】存储管理应用的所有组件的状态,
并以相应的规则保证状态以一种可预测的方式发生变化。
状态管理是啥
将多个组件需要共享的变量统一存储在一个对象中,然后
将此对象放在顶层的Vue对象,这样,所有的组件均可共享此对象中的值。
二丶Vue x的优点
Vuex实现了响应式,既在一个对象中的数据进行了更新,
则其他所有使用此对象的模块,都会对此数据进行更新。
根据官网给的图分析一波(单界面)
State(状态) :存在Vue实例中的data中【使用变量来存储状态】
View( 视图) :用于展示数据
Action (行为) :可添加相应的事件来改变状态的值
图的动态分析
state存储状态
—>
view展示当前状态的值
—>
action改变当前存储状态
多界面
1.State(状态):存储需要共享的值
2.Vue component(组件):将值提供给组件进行展示
3.Action(事件):组件需要修改状态中的值时,需要[发布]行为
4.mutation(变更):将事件[提交]至mutation,进行对状态的改变
注:
1.devtools:vue官方提供的插件,用于记录状态的更新
【但是必须通过mutation进行修改】
2.backend(后端):需请求后端API时,需要在action中完成
front end:前端
三丶Vuex 安装
1、通过指令进行安装:npm install vuex --save
2、创建文件夹:store、在文件夹下创建:index.js
3、导入Vue/Vuex
4、安装Vuex插件