-
Vuex4-15-热重载
热重载
使用 webpack 的 Hot Module Replacement API,Vuex 支持在开发过程中热重载 mutation、module、action 和 getter。
你也可以在 Browserify 中使用 browserify-hmr 插件。
对于 mutation 和模块,你需要使用 store.hotUpdate() 方法:
// store.js
imp...
2021-08-29 13:01:55 |
VUE
-
Vuex4-14-test 测试
我们主要想针对 Vuex 中的 mutation 和 action 进行单元测试。
测试 Mutation
Mutation 很容易被测试,因为它们仅仅是一些完全依赖参数的函数。
这里有一个小技巧,如果你使用了 ES2015 模块,且将 mutation 定义在了 store.js 文件中,那么除了模块的默认导出外,你还应该将 mutation 进行命名导出:
const state...
2021-08-29 13:01:55 |
VUE
-
Vuex4-13-表单模式
表单处理
当在严格模式中使用 Vuex 时,在属于 Vuex 的 state 上使用 v-model 会比较棘手:
<input v-model="obj.message">
假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象,在用户输入时,v-model 会试图直接修改 obj.message。
在严格模式中,由于这个修改不是在 mutat...
2021-08-29 13:01:55 |
VUE
-
Vuex4-12-严格模式
严格模式
开启严格模式,仅需在创建 store 的时候传入 strict: true:
const store = createStore({
// ...
strict: true
})
在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。
这能保证所有的状态变更都能被调试工具跟踪到。
开发环境与发布环境
不要在发布环境下启用严格...
2021-08-29 13:01:55 |
VUE
-
Vuex4-11-插件
插件
Vuex 的 store 接受 plugins 选项,这个选项暴露出每次 mutation 的钩子。
Vuex 插件就是一个函数,它接收 store 作为唯一参数:
const myPlugin = (store) => {
// 当 store 初始化后调用
store.subscribe((mutation, state) => {
// 每次 m...
2021-08-29 13:01:55 |
VUE
-
Vuex4-10-组合式API
组合式 API
可以通过调用 useStore 函数,来在 setup 钩子函数中访问 store。
这与在组件中使用选项式 API 访问 this.$store 是等效的。
import { useStore } from 'vuex'
export default {
setup () {
const store = useStore()
}
}
访问 Sta...
2021-08-29 13:01:55 |
VUE
-
Vuex4-09-struct 项目结构
Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:
应用层级的状态应该集中到单个 store 对象中。
提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。
只要你遵守以上规则,如何组织代码随你便。
如果你的 store 文件太大,只需将 acti...
2021-08-29 13:01:55 |
VUE
-
Vuex4-08-Module
Module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。
当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
const moduleA = {
...
2021-08-29 13:01:55 |
VUE