为什么需要状态管理？
我们一个项目会有很多的数据、或者是组件拼成的；而不同的组件之间往往要共享一些状态。比如用户的登录状态、购物车的动态商品增删等；
否则若此时某个组件的内容发生改变。我们常常要通过事件把这些更新通知传到其他的组件一个个的进行更新，当数据组件非常多的时候，这一个“通知”的行为就会变得非常复杂。
数据状态管理模型
在学习并使用vuex之前，有必要先把官网上的这个数据状态管理模式的流程图先理解清晰：
①Store 是一个统一的数据中心，用来维护状态数据
②component 每个组件进行更新的时候就会通知数据中心
③数据中心Store再把shareed state共享的状态去触发调用它的每一个组件的更新。
文章图片
【VUEX】
vuex的工作流程：状态管理Flux模型
Flux模型图的目的也是为了实现上面的状态管理模型图，使用vuex去操作最主要的是理解这个模型。
①component通过Action操作Mutations
③Mutations控制数据中心的状态State
④而State更改后，又反馈到了Components
⑤Action：跟后台去调用API的操作只能在Action中执行
⑥是vuex操作的的部分
文章图片
- 首先需要在创建的项目中安装vuex
npm install vuex --save - 引入：类似于引入vue一样
import Vuex from vuex - 注册：使用Vue.use() 方法来注册 vuex
Vue.use(Vuex) - 实例化： 用store模式来实现状态管理
let store = new Vuex.Store({
state: {
数据中心……
}
mutations: {
……
},
actions: {
……
},
getters: {
……
}
})
推荐阅读
- vue3.0|从零搭建vite + vue3.0 + vuex + router + sass/less + naive
- javascript|vue 移动端断网后处理
- WEB|我的VUE 学习之路（下）