Vuejs Vuex详解
目录
Vuex是做什么的?
管理什么状态呢?
单界面的状态管理
单界面状态管理的实现
- 在这个案例中，我们有木有状态需要管理呢？没错，就是个数counter。
- counter需要某种方式被记录下来，也就是我们的State。
- counter目前的值需要被显示在界面中，也就是我们的View部分。
- 界面发生某些操作时（我们这里是用户的点击，也可以是用户的input），需要去更新状态，也就是我们的Actions
- 这不就是上面的流程图了吗？
多界面状态管理
Vuex状态管理图例
简单的案例
- 我们还是实现一下之前简单的案例
- 安装插件：npm install vuex --save
- 首先，我们需要在某个地方存放我们的Vuex代码：
- 这里，我们先创建一个文件夹store，并且在其中创建一个index.js文件
- 在index.js文件中写入如下代码：
挂载到Vue实例中
- 其次，我们让所有的Vue组件都可以使用这个store对象
- 来到main.js文件，导入store对象，并且放在new Vue中
- 这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了
使用Vuex的count
- 我们来对使用步骤，做一个简单的小结：
- 1.提取出一个公共的store对象，用于保存在多个组件中共享的状态
- 2.将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到
- 3.在其他组件中使用store对象中保存的状态即可
- 通过this.$store.state.属性的方式来访问状态
- 通过this.$store.commit('mutation中方法')来修改状态
- 注意事项：
- 我们通过提交mutation的方式，而非直接改变store.state.count。
- 这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值。
Vuex核心概念
- Vuex有几个比较核心的概念:
- State
- Getters
- Mutation
- Action
- Module
State单一状态树
Getters基本使用
- 有时候，我们需要从store中获取一些state变异后的状态，比如下面的Store中：
- 获取学生年龄大于20的个数。
- 我们可以在Store中定义getters
Getters作为参数和传递参数
- 如果我们已经有了一个获取所有年龄大于20岁学生列表的getters, 那么代码可以这样来写
- getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数.
- 比如上面的案例中,我们希望根据ID获取用户的信息
Mutation状态更新
- Vuex的store状态的更新唯一方式：提交Mutation
- Mutation主要包括两部分：
- 字符串的事件类型（type）
- 一个回调函数（handler）,该回调函数的第一个参数就是state。
- mutation的定义方式：
- 通过mutation更新
Mutation传递参数
- 在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数
- 参数被称为是mutation的载荷(Payload)
- Mutation中的代码:
- 但是如果参数不是一个呢?
- 比如我们有很多参数需要传递.
- 这个时候, 我们通常会以对象的形式传递, 也就是payload是一个对象.
- 这个时候可以再从对象中取出相关的信息.
Mutation提交风格
- 上面的通过commit进行提交是一种普通的方式
- Vue还提供了另外一种风格, 它是一个包含type属性的对象
- Mutation中的处理方式是将整个commit的对象作为payload使用, 所以代码没有改变, 依然如下:
Mutation响应规则
- Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新.
- 这就要求我们必须遵守一些Vuex对应的规则:
- 提前在store中初始化好所需的属性.
- 当给state中的对象添加新属性时, 使用下面的方式:
- 方式一: 使用Vue.set(obj, 'newProp', 123)
- 方式二: 用新对象给旧对象重新赋值
- 我们来看一个例子:
- 当我们点击更新信息时, 界面并没有发生对应改变.
- 如何才能让它改变呢?
- 查看下面代码的方式一和方式二
- 都可以让state中的属性是响应式的.
- 示例2：
Mutation常量类型 – 概念
- 我们来考虑下面的问题:
- 在mutation中, 我们定义了很多事件类型(也就是其中的方法名称).
- 当我们的项目增大时, Vuex管理的状态越来越多, 需要更新状态的情况越来越多, 那么意味着Mutation中的方法越来越多.
- 方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况.
- 如何避免上述的问题呢?
- 在各种Flux实现中, 一种很常见的方案就是使用常量替代Mutation事件的类型.
- 我们可以将这些常量放在一个单独的文件中, 方便管理以及让整个app所有的事件类型一目了然.
- 具体怎么做呢?
- 我们可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量.
- 定义常量时, 我们可以使用ES2015中的风格, 使用一个常量来作为函数的名称.
Mutation常量类型 – 代码
Mutation同步函数
- 通常情况下, Vuex要求我们Mutation中的方法必须是同步方法.
- 主要的原因是当我们使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照.
- 但是如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成.
- 比如我们之前的代码, 当执行更新时, devtools中会有如下信息: 图1
- 但是, 如果Vuex中的代码, 我们使用了异步函数: 图2
- 你会发现state中的info数据一直没有被改变, 因为他无法追踪到.
- 所以，通常情况下, 不要再mutation中进行异步的操作
Action的基本定义
- 我们强调, 不要再Mutation中进行异步操作.
- 但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
- Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.
- Action的基本使用代码如下:
- context是什么?
- context是和store对象具有相同方法和属性的对象.
- 也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.
- 但是注意, 这里它们并不是同一个对象, 为什么呢? 我们后面学习Modules的时候, 再具体说.
- 这样的代码是否多此一举呢?
- 我们定义了actions, 然后又在actions中去进行commit?
- 事实上并不是这样, 如果在Vuex中有异步操作, 那么我们就可以在actions中完成了.
Action的分发
- 在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch
- 同样的, 也是支持传递payload
Action返回的Promise
- 前面我们学习ES6语法的时候说过, Promise经常用于异步操作.
- 在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject.
- 我们来看下面的代码:
认识Module
- Module是模块的意思, 为什么在Vuex中我们要使用模块呢?
- Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
- 当应用变得非常复杂时,store对象就有可能变得相当臃肿.
- 为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等
- 我们按照什么样的方式来组织模块呢?
- 我们来看下边的代码
Module局部状态
- 上面的代码中, 我们已经有了整体的组织结构, 下面我们来看看具体的局部模块中的代码如何书写.
- 我们在moduleA中添加state、mutations、getters
- mutation和getters接收的第一个参数是局部状态对象
- 注意:
- 虽然, 我们的doubleCount和increment都是定义在对象内部的.
- 但是在调用的时候, 依然是通过this.$store来直接调用的.
- 示例
Actions的写法
- actions的写法呢? 接收一个context参数对象
- 局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState
- 如果getters中也需要使用全局的状态, 可以接受更多的参数
项目结构
- 当我们的Vuex帮助我们管理过多的内容时, 好的项目结构可以让我们的代码更加清晰.
1834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
