说明

vuex是一个专门为vue.js设计的集中式状态管理架构。
image.png比如变量的值，就是状态

而且是响应式的，内部有监听，一旦发生变化会更新所有引用的地方。

image.png

image.png
image.png

背景

image.png
1、多个组件都需要共享
比如我们有几个页面要显示用户名称和用户等级，或者显示用户的地理位置。
image.png
2、父子组件层级关系太多的
image.png

3、token 令牌，用户登录后由服务器发放给用户，用户后续的请求必须带上token

如果我们不把这些属性设置为状态，那每个页面遇到后，都会到服务器进行查找计算，返回后再显示。

Vuex的状态管理

image.png

image.png
把数据交给一个全局的对象进行管理，要获增删改查就调用对象的方法，任意一个地方都可以获取这个对象并使用。

数据都是响应式的，改动后大家引用的地方都会跟着一起变。

开发时还可以通过官方的插件 Dev Tool 查看数据，方便开发管理。
image.png

单一状态树

image.png
可以想象成一个公司，数据（状态）就是员工。

设计原则就是尽量用单一的状态树来储存数据（建议只开1个公司），你也可以用多个状态树（多创建几个vuex即可，相当于多开几家公司）。

那么单一的话，很多不同模块的数据不是混一起了？后面可以通过模块module划分，相当于公司分部门，员工分到各个部门。
image.png

基本流程

image.png

=====================

安装

方法一：脚手架创建时勾选

创建项目时，选择了Vuex，就会自动安装和配置，很方便。
正常安装后，src里面就会多了一个store文件夹，里面有一个index.js，里面就是vuex的配置
image.png

方法二：手动安装

Vuex 3 和 vue2.x

通过npm安装

  1. npm i vuex

Vuex 4 和 vue3.x

  1. npm i vuex@next

[

](https://next.vuex.vuejs.org/installation.html#npm)

DevTools

查看 Vue-Devtools Vue浏览器插件

=====================

基本使用

1、创建状态仓库（Store对象）

查看 https://www.yuque.com/yejielin/mypn47/sibt0v

2、Vue引入使用

查看 https://www.yuque.com/yejielin/mypn47/fzn1es
后面还可以再封装，见下getters

3、计算属性 getters

查看 https://www.yuque.com/yejielin/mypn47/vbmit3

4、（同步）修改变量 mutations

查看 https://www.yuque.com/yejielin/mypn47/dcbepz

5、（异步）修改变量 actions

查看 https://www.yuque.com/yejielin/mypn47/va2zxg

6、分模块 modules

查看 https://www.yuque.com/yejielin/mypn47/okpibh

=====================

刷新浏览器问题（内存）

由于vuex是把数据放内存的，因此刷新浏览器，vuex的储存的数据就会消失。

项目中为了解决这个问题（比如用户成功登录后，vuex储存用户的信息，但是用户刷新页面就没了），会通过浏览器的Local Storage等技术，持久化储存数据。

即使用户刷新，Vuex也可以从这些地方取数据。
image.png

但什么时候能保证用户刷新后就去取呢？

可以把vuex 取的方法写在项目的 main.js 里面，因为每次刷新都会重新从这里开始运行，
image.png

./store/index.js
image.png