想利用暑假时间好好学习一下vue,会记录每一天的学习内容。
今天是学习vue的第14
天!
起起伏伏乃人生常态,继续加油~
学习内容
Vuex
1. Vuex概念和作用
Vuex是做什么的?
Vuex
是一个专门为Vue.js
应用程序开发的状态管理模式
- 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
Vuex
也集成到Vue
的官方调试工具devtools extension
,提供了诸如零配置的time-travel
调试、状态快照导入导出等高级调试功能
状态管理是什么?
- 可以简单的将其看成是需要把多个组件共享的变量全部存储在一个对象里面
- 然后,将这个对象放在顶层的
Vue
实例中,让其他组件可以使用 - 那么,多个组件是不是就可以共享这个对象中的所有变量属性了呢?
我们不能自己封装一个对象来管理吗?
Vue.js
带给我们最大的便利是响应式- 如果我们自己封装实现一个对象能不能保证它里面所有的属性都做到响应式呢?可能会有些麻烦
Vuex
就是为了提供这样一个在多个组件中共享状态的插件,直接用它吧
管理什么状态呢?
有什么状态需要我们在多个组件中共享的?
- 比如用户的登录状态、用户名称、用户头像、用户地理位置信息等
- 比如商品的收藏、购物车中的商品等
- 这些状态信息,都可以放在统一的地方,对它进行保存和管理,而且它们还是响应式的
2. 单界面到多界面状态管理切换
单界面的状态管理
我们知道,要在单个组件中进行状态管理是一件非常简单的事情
以下是一个表示“单向数据流”理念的简单示意图:
State
:状态View
:视图层,可以针对State
的变化,显示不同的信息Actions
:主要是用户的各种操作:点击、输入等,会导致状态的改变
以一个简单的计数应用为例:
在这个案例中我们的counter
状态是需要管理的
counter
需要某种方式被记录下来,也就是我们的State
counter
目前的值需要被显示在页面中,也就是我们的View
- 界面发生点击操作时,需要去更新状态,也就是我们的
Actions
多界面状态管理
vue实际上已经帮我们做好了单界面的状态管理,但如果是多个界面呢?
- 多个视图都依赖于同一个状态(一个状态改了,多个界面需要进行更新)
- 不同界面的
Actions
都想修改同一个状态(Home.vue
需要修改,Profile.vue
也需要修改这个状态)
也就是说对于某些状态(状态1、状态2、状态3)来说,只属于某一个视图,但有一些状态(状态a、状态b、状态c),属于多个视图想要共同维护的
- 状态a、状态b、状态c交给
vuex
管理
全局单例模式:
- 将共享的状态抽取出来,交给vuex统一进行管理
- 之后每个视图按照规定进行访问和修改等操作
Vuex的安装和配置
安装Vuex
npm install vuex --save
还是跟配置vue-router
类似的步骤
src
文件夹下建一个store
文件夹(这里一般不叫vuex
),在里面建index.js
文件
在main.js
中导入、挂载
store
实例里放的东西是比较固定的
state
里实际上就可以定义我们上面的counter
state: {
counter: 1000
},
假如有多个页面,现在就能共享这个counter
了
为了演示多界面,再新建一个HelloVuex
组件
当我们在main.js
中挂载了store
之后,所有的组件都有$store
对象(可类比router
和$router
)
在HelloVuex.vue
中展示counter
:
<template>
<div>
<h2>{{$store.state.counter}}</h2>
</div>
</template>
那么在App.vue
中的代码我们也要进行修改:
在App
中改,HelloVuex
也能响应
但是,注意我们对counter
的修改方式:$store.state.counter
直接对counter
进行了修改。官方不建议这样来修改,而是要通过另一种方式去改。
我们先看一下Vuex
的状态管理图
Vuex状态管理图
图上的字要仔细看看👀
Devtools
是vue开发的一个浏览器插件,可以记录每次修改state的状态
- vuex中管理的状态都是多个界面共享的状态,有可能是界面1修改这个状态,也可能是界面2…
- 这样我们很难跟踪到到底是哪个界面来修改的状态,如果有错误就不好改
- 利用
Devtools
我们就能知道哪一步改错了,就能针对性改错
但是如果我们绕过了mutations
环节,Devtools
就跟踪不到了,只有通过mutations
修改,Devtools
才会进行记录
⚠️:Devtools
跟踪不到异步操作,所以在mutations
中推荐只进行同步操作
3. Devtools和mutations
Devtools安装
在chrome网上应用商店可以直接下载,不能翻墙的话找找别的渠道也可
这里出现vue
的时候就是安装好了
在这可以看到当前项目的结构:
切换到Vuex
这里可以看到所有的state
和跟踪记录
mutations
这里我们就开始通过mutations
修改counter了
mutations: {
// 定义一些方法
// state参数自动传过来的
increment(state) {
state.counter++
},
decrement(state) {
state.counter--
}
}
App.vue
中修改state
的方式也要改掉
现在已经可以成功跟踪了
4. Vuex核心概念
State
Getters
Mutations
Actions
Modules
State 单一状态树
Vuex
提出使用单一状态树,什么是单一状态树?
- 可以翻译成单一数据源
用一个生活中的例子做一个简单类比:
- 在国内,我们有很多信息需要被记录,比如户口信息
- 户口信息被分散在很多地方进行管理,如果有一天你要转户口,你需要去各个对应的工作点打印盖章各种资料,最后到一个地方提交证明
- 这种保存信息的方案,低效且不便于管理
这和我们在应用开发中比较类似:
- 如果我们的状态信息是保存在多个
Store
实例中的,那么之后的管理和维护等等都会变得特别困难 - 所以
Vuex
使用了单一状态树来管理应用层级的全部状态, 这就意味着每个应用将仅仅包含一个Store
实例 - 单一状态树能够让我们以最直接的方式找到某个状态的片段,而且在之后的维护和调试过程中,也可以非常方便管理和维护
核心概念没学完😢,明天继续