安装指令 : npm install vuex --save
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)
Vuex 文档:https://vuex.vuejs.org/zh/
一、Vuex 是做什么的?
-
官方解释:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
-
通俗解释:
把需要多个组件共享的变量全部存储在一个对象里面。然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。为了保证属性做到响应式,所以 Vue.js 就给我们提供了一个插件 Vuex (在多个组件间共享状态的插件),用来存放那些变量
-
管理什么状态呢?有什么状态时需要我们在多个组件间共享的呢?
如果你做过大型开放,你一定遇到过多个状态,在多个界面间的共享问题。
比如用户的登录状态、用户名称、头像、地理位置信息等等。
比如商品的收藏、购物车中的物品等等。
这些状态信息,我们都可以放在统一的地方,对它进行保存和管理,而且它们还是响应式的 -
Vuex 状态管理图例
二、Vuex的基本使用 (使用cli2)
基本流程:
创建一个 store 文件夹 —> index.js —> 导入Vuex —> 使用 Vuex 插件 —> 创建 Vuex.Store 实例对象 store —> export default store 导出 store —> 挂载到 Vue 实例中 —> 其他组件通过: this.$store
获取 store 对象 —> 通过: this.$store.state.属性
的方式来访问状态 —> 通过this.$store.commit('mutation中方法')
来修改状态
三、Vuex 核心概念
-
state (单一状态树 存放数据)
-
Getters (处理数据) ,类似于计算属性
- 从store中获取一些state变异后的状态
- Getters作为参数和传递参数
getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数.
- 从store中获取一些state变异后的状态
-
mutations (修改数据,里面必须是同步函数)
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
-
mutation 是什么?
mutation 主要包括俩个部分:
- 字符串的事件类型(type)
- 一个回调函数(handler),该回调函数的第一个参数就是state
-
mutation 传递参数
- 在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数
- 参数被称为是mutation的载荷(Payload)
- 如果参数有很多,不是一个,这个时候我们以对象的形式传递,也就是payload是一个对象
-
mutation的提交风格
-
mutation 响应规则
-
什么是响应式?
当我们数据发生变化时,界面跟着一起刷新 -
Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新
-
这就要求我们必须遵守一些Vuex对应的规则 什么规则呢?
-
提前在store中初始化好所需的属性
-
当给state中的对象添加新属性时, 使用下面的方式:
-
方式一: 使用Vue.set(obj, ‘newProp’, 123)
-
方式二: 用新对象给旧对象重新赋值
state.obj = { ...state.obj, newProp: 123 }
-
-
-
-
使用常量替代Mutation事件的类型
怎么做呢?
- 我们可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量.
- 定义常量时, 我们可以使用ES2015中的风格, 使用一个常量来作为函数的名称
-
Mutation同步函数
- 通常情况下, Vuex要求我们Mutation中的方法必须是同步方法
- 主要的原因是当我们使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照
- 但是如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成
- So, 通常情况下, 不要再mutation中进行异步的操作
-
-
Actions (接收异步数据)
-
在Vuex中 执行一些异步操作 如网络请求,定时器
-
Action类似于Mutation, 但是是用来代替Mutation进行异步操作的
-
Action 类似于 mutation,不同在于 :
- Action 提交的是 mutation,而不是直接变更状态
- Action 可以包含任意异步操作
-
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用
context.commit
提交一个 mutation,或者通过context.state
和context.getters
来获取 state 和 getters -
Action 在组件中分发
- 你在组件中使用
this.$store.dispatch('xxx')
分发 action - 同样的, 也是支持传递payload
- 过程图
- Action 返回的 promise (常用于异步操作)
- 在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve(then)或reject (catch)
- 代码
- 你在组件中使用
-
-
Modules
- Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
- 全局结构图
3. 模块的局部图