原文:https://medium.com/@lachlanmiller_52885/vue-3s-alpha-has-been-out-for-a-while-now-but-no-vue-3-vuex-yet-c73b26389978
Vue 3 的 alpha 版本已经放出有些日子了,但是大多数核心库都还没赶上趟 -- 说得就是 Vuex 和 Vue Router 了。让我们来使用 Vue 3 新的反应式 API 实现自己的罢。
为了让事情变得简单,我们将只实现顶级的 state
、actions
、getters
和 mutations
- 暂时没有 namespaced modules
,尽管我也会留一条如何实现的线索。
本文中的源码和测试可以在 这里 找到。在线的 demo 可以在 这里 看到。
简单起见,我们的实现将不支持整个 API — 只是一个子集。我们将编码以使下面的代码可用:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
INCREMENT(state, payload) {
state.count += payload
}
},
actions: {
increment(context, payload) {
context.commit('INCREMENT', payload)
}
},
getters: {
triple(state) {
return state.count * 3
}
}
})
唯一的问题是在本文撰写之时,尚无办法将 $store
附加到 Vue.prototype
,所以我们将用 window.store
代替 this.$store
。
由于 Vue 3 从其组件和模版系统中单独暴露出了反应式 API,所以我们就可以用诸如 reactive
和 computed
等函数来构建一个 Vuex store,并且单元测试也甚至完全无需加载一个组件。这对于我们足够好了,因为 Vue Test Utils 还不支持 Vue 3。
我们将采用 TDD 的方式完成本次开发。需要安装的只有两样:vue
和 jest
。通过 yarn add vue@3.0.0-alpha.1 babel-jest @babel/core @babel/preset-env
安装它们。需要做一些基础的配置 - 按其文档配置即可。
第一个测试是关于 state
的:
test('reactive state', () => {
const store = new Vuex.Store({
state: {
count: 0
}
})
expect(store.state).toEqual({ count: 0 })
store.state.count++
expect(store.state).toEqual({ count: 1 })
})
毫无悬念地失败了 — Vuex 为 undefined。让我们定义它:
class Store {
}
const Vuex = {
Store
}
现在我们得到的是 Expected: {"count": 0}, Received: undefined
。让我们从 vue
中提取 reactive
并让测试通过吧!
import { reactive } from 'vue'
class Store {
constructor(options) {
this.state = reactive(options.state)
}
}
Vue 的 reactive
函数真是 so easy。我们在测试中直接修改了 store.state
- 这不太理想,所以来添加一个 mutation 作为替代。
像上面一样,还是先来编写测试:
test('commits a mutation', () => {
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
INCREMENT(state, payload) {
state.count += payload
}
}
})
store.commit('INCREMENT', 1)
expect(store.state).toEqual({ count: 1 })
})
测试失败,理所当然。报错信息为 TypeError: store.commit is not a function
。让我们来实现 commit
方法,同时也要把 options.mutations
赋值给 this.mutations
,这样才能在 commit
中访问到:
class Store {
constructor(options) {
this.state = reactive(options.state)
this.mutations = options.mutations
}
commit(handle, payload) {
const mutation = this.mutations[handle]
if (!mutation) {
throw Error(`[Hackex]: ${handle} is not defined`)
}
mutation(this.state, payload)
}
}
因为 mutations
只是一个将函数映射为其属性的对象,所以我们用 handle
参数就能取出对应的函数,并传入 this.state
调用它。我们也能为 mutation 未被定义的情况编写一个测试:
test('throws an error for a missing mutation', () => {
const store = new Vuex.Store({ state: {}, mutations: {} })
expect(() => store.commit('INCREMENT', 1))
.toThrow('[Hackex]: INCREMENT is not defined')
})
dispatch
很类似于 commit
- 两者的首个参数都是一个函数调用名的字符串,以及一个 payload 作为第二个参数。
但与某个 mutation 函数接受 state
作为首参不同,一个 action 的第一个参数是个 context
对象,该对象暴露了 state
、commit
、getters
和 dispatch
。
同时,dispatch
将总是返回一个 Promise
- 所以 dispatch(...).then
应该是合法的。这意味着如果用户的 action 没返回一个 Promise,或调用了某些类似 axios.get
的东西,我们也需要为用户返回一个 Promise。
我们可以编写如下测试。你可能会注意到测试重复了一大段刚才 mutation 用例中的东西 — 我们稍后会用一些工厂函数来清理它。
test('dispatches an action', async () => {
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
INCREMENT(state, payload) {
state.count += payload
}
},
actions: {
increment(context, payload) {
context.commit('INCREMENT', payload)
}
}
})
store.dispatch('increment', 1).then(() => {
expect(store.state).toEqual({ count: 1 })
})
})
运行这段将得到报错 TypeError: store.dispatch is not a function
。从前面的经验中我们得知需要在构建函数中也给 actions 赋值,所以让我们完成这两件事,并以早先调用 mutation
的相同方式调用 action
:
class Store
constructor(options) {
// ...
this.actions = options.actions
}
// ...
dispatch(handle, payload) {
const action = this.actions[handle]
const actionCall = action(this, payload)
}
}
现在运行后得到了 TypeError: Cannot read property 'then' of undefined
报错。这当然是因为,没有返回一个 Promise
- 其实我们还什么都没返回呢。我们可以像下面这样检查返回值是否为一个 Promise
,如果不是的话,那就硬返回一个:
class Store {
// ...
dispatch(handle, payload) {
const action = this.actions[handle]
const actionCall = action(this, payload)
if (!actionCall || !typeof actionCall.then) {
return Promise.resolve(actionCall)
}
return actionCall
}
这和 Vuex 的真实实现并无太大区别,在 这里 查看其源码。现在测试通过了!
computed
实现 getters实现 getters
会更有意思一点。我们同样会使用 Vue 暴露出的新 computed
方法。开始编写测试:
test('getters', () => {
const store = new Vuex.Store({
state: {
count: 5
},
mutations: {},
actions: {},
getters: {
triple(state) {
return state.count * 3
}
}
})
expect(store.getters['triple']).toBe(15)
store.state.count += 5
expect(store.getters['triple']).toBe(30)
})
照例,我们得到了 TypeError: Cannot read property 'triple' of undefined
报错。不过这次我们不能只在 constructor
中写上 this.getters = getters
就草草了事啦 - 需要遍历 options.getters 并确保它们都用上搭配了响应式状态值的 computed
。一种简单却不正确的方式会是这这样的:
class Store {
constructor(options) {
// ...
if (!options.getters) {
return
}
for (const [handle, fn] of Object.entries(options.getters)) {
this.getters[handle] = computed(() => fn(this.state)).value
}
}
}
Object.entries(options.getters)
返回函数名 handle
(本例中为 triple
) 和回调函数 fn
(getter 函数本身) 。当我们运行测试时,第一条断言 expect(store.getters['triple']).toBe(15)
通过了,因为返回了 .value
;但同时也丢失了反应性 -- store.getters['triple']
被永远赋值为一个数字了。我们本想返回调用 computed
后的值的。可以通过 Object.defineProperty
实现这一点,在对象上定义一个动态的 get
方法。这也是真实的 Vuex 所做的 - 参考 这里 。
更新后可工作的实现如下:
class Store {
constructor(options) {
// ...
for (const [handle, fn] of Object.entries(options.getters)) {
Object.defineProperty(this.getters, handle, {
get: () => computed(() => fn(this.state)).value,
enumerable: true
})
}
}
}
现在一切正常了。
为了完全兼容真实的 Vuex,需要实现 module。鉴于文章的长度,我不会在这里完整的实现它。基本上,你只需要为每个 module 递归地实现以上的过程并适当创建命名空间即可。就来看看 module 中嵌套的 state
如何实现这点吧。测试看起来是这样的:
test('nested state', () => {
const store = new Vuex.Store({
state: {
count: 5
},
mutations: {},
actions: {},
modules: {
levelOne: {
state: {},
modules: {
levelTwo: {
state: { name: 'level two' }
}
}
}
}
})
expect(store.state.levelOne.levelTwo.name).toBe('level two')
})
我们可以用一些巧妙的递归来实现:
const registerState = (modules, state = {}) => {
for (const [name, module] of Object.entries(modules)) {
state[name] = module.state
if (module.modules) {
registerState(module.modules, state[name])
}
}
return state
}
Object.entries
再次发挥了作用 - 我们取得了模块名称以及内容。如果该模块又包含 modules
,则再次调用 registerState
,并传入上一层模块的 state。这让我们可以任意嵌套多层。到达底层模块时,就直接返回 state
。
actions
、mutations
和 getters
稍微复杂一点。我会在之后的文章中实现它们。
升级 constructor
以使用 registerState
方法,所有测试再次通过了。这一步在 actions/mutations/getters 之前完成,这样它们就能访问传递到 reactive
中的整个状态了。
class Store {
constructor(options) {
let nestedState = {}
if (options.modules) {
nestedState = registerState(options.modules, options.state)
}
this.state = reactive({ ...options.state, ...nestedState })
// ..
}
}
一些特性尚未实现 -- 比如:
subscribe
能力 (主要用于 plugins)我会在之后的文章中覆盖它们,但实现起来也不太困难。对于有兴趣的读者也是很好的实践机会。