前言
使用vue作为主力开发技术栈的小伙伴，vuex大家在工作中必不可少，面试的时候面试官也多多少少会问一些关于vuex内部机制的问题，小伙伴们只能是去阅读vuex的源码，但不可否认，有些小伙伴们阅读起来源码多少有些吃力，so本文即将带着大家来实现一个简化版的vuex
vuex的工作流程如下图所示
组件内通过dispatch调用actions
actions通过commit提交mutation
mutation修改state
state响应式更新 到组件上
咱们根据这个流程开始写代码
准备工作
咱们来创建个myvuex目录来编写咱们的代码，然后打开终端执行yarn init -y 或者 npm init -y。
考虑到有些小伙伴对rollup有些陌生，构建工具咱们这里选用的是webpack
构建webpack开发环境，本文并不打算展开说webpack，so 我就把webpack用到的依赖包一气下完了
$ yarn add webpack webpack-cli webpack-dev-server webpack-merge clean-webpack-plugin babel-loader @babel/core @babel/preset-env
然后开始编写咱们的webpack配置文件，并创建一个build目录存放
// webpack.config.js
const merge = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const devConfig = require("./webpack.dev.config");
const proConfig = require("./webpack.pro.config");
let config = process.NODE_ENV === "development" ? devConfig : proConfig;
module.exports = merge(baseConfig, config);
// webpack.base.config.js
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "../src/index.js"),
output: {
path: path.resolve(__dirname, "../dist"),
filename: "myvuex.js",
libraryTarget: "umd"
},
module: {
rules: [
{
test: /\.js$/i,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
]
}
};
// webpack.dev.config.js 开发环境配置
module.exports = {
devtool: 'cheap-module-eval-source-map'
}
// webpack.pro.config.js 生成环境配置
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
plugins: [
new CleanWebpackPlugin() // 构建成功后清空dist目录
]
};
// package.json
{
"name": "myvuex",
"version": "1.0.0",
"main": "src/index.js",
+ "scripts": {
+ "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
+ "build": "webpack --mode=production --config ./build/webpack.config"
},
"files": [
"dist"
],
"license": "MIT",
"dependencies": {
"@babel/core": "^7.8.4",
"@babel/preset-env": "^7.8.4",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.2",
"webpack-merge": "^4.2.2"
}
}
webpack搭建好了之后，我们在用vue-cli创建一个咱们的测试项目
$ vue create myvuextest
然后使用yarn link 建立一个链接，使我们能够在myvuextest项目中使用myvuex，对yarn link不熟悉的小伙伴可以先翻到文章结尾处了解一下
myvuex 项目
myvuextest 项目
完事之后 我们就可以通过import引入myvuex了，如下图所示
回到咱们的myvuex 在根目录创建一个index.js 文件测试一下在myvuextest项目中是否可以正常引入
然后启动咱们的myvuextest项目之后打开浏览器
可以看到咱们在myvuex项目中编写代码可以在myvuextest中正常使用了
准备工作完成之后，可以正式开始编写咱们的项目代码了
正式开始
创建一个src目录存放项目主要代码
然后创建一个store.js
接下来咱们看看根据vuex的用法咱们的myvuex该如何使用，咱们根据需求完善逻辑
import Vue from "vue";
import MyVuex from "myvuex";
Vue.use(MyVuex)
const store = new MyVuex.Store({
state: {},
actions: {},
mutations: {},
getters: {}
})
export default store
可以看到，咱们需要一个 Store 类，并且还要使用Vue.use挂载到vue上面，这就需要我们提供一个 install 方法供vue调用，Store类接受一系列参数state、actions,mutations,getters等…
咱们先动手创建一个Store类，和一个install方法
// src/store.js
export class Store {
constructor() {
}
}
export function install() {
}
并在index.js中导出供myvuextest使用
import {
Store,
install
} from "./store";
export default {
Store,
install
}
回过头来看下myvuextest项目
我们来打印一下store
可以看到咱们的store已经正常打印出来了
接着咱们该怎么让咱们定义的state渲染到页面上呢
// myvuextest/store/index.js
import Vue from "vue";
import MyVuex from "myvuex";
Vue.use(MyVuex)
const store = new MyVuex.Store({
state: {
title: "hello myvuex"
}
})
export default store
// App.vue
<template>
<div id="app">{{ $store.state.title }}</div>
</template>
<script>
export default {
name: "app"
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
font-size: 30px;
margin-top: 60px;
}
</style>
一执行发现并没有效果 并向咱扔出了一个错误，
别着急，咱们一步步来 ，上文中提到的install方法咱们和Store类只是定义了还没有进一步完善，所以vue实例中并没有咱们的$store
// myvuex/src/store.js
export class Store {
constructor(options = {}) {
this.state = options.state
this.actions = options.actions
this.mutations = options.mutations
this.getters = options.getters
}
}
export function install(Vue) {
Vue.mixin({
beforeCreate() {
const options = this.$options
if (options.store) {
/*存在store其实代表的就是Root节点，直接使用store*/
this.$store = options.store
} else if (options.parent && options.parent.$store) {
/*子组件直接从父组件中获取$store，这样就保证了所有组件都公用了全局的同一份store*/
this.$store = options.parent.$store
}
}
})
}
install中使用的this.$options就是咱们new Vue时传入的参数，咱们的store就是在这传给vue的
写完后，咱们的store中的参数都挂载到了vue身上，所以这个时候我们打开页面就可以看到咱们state中的数据了
当然了，目前这样肯定不行，vuex中的state也是响应式的，咱们也得想办法把咱们的state处理一下，实现数据响应式的方案有很多，比如说Object.defineProperty、Proxy…，但是这些写起来还是很麻烦的，其实咱们可以使用一个更加巧妙的方式，那就是借助vue本身的数据响应式来处理，既简单又高效
接下来改造一下咱们代码
首先在install方法中把咱们Vue存一下
// myvuex/src/store.js
let Vue;
export function install(_Vue) {
Vue = _Vue
Vue.mixin({
beforeCreate() {
const options = this.$options
if (options.store) {
this.$store = options.store
} else if (options.parent && options.parent.$store) {
this.$store = options.parent.$store
}
}
})
}
然后把Store中的state修改一下
// myvuex/src/store.js
export class Store {
constructor(options = {}) {
let {
state
} = options
this.actions = options.actions
this.mutations = options.mutations
this.getters = options.getters
this._vm = new Vue({
data: {
$$state: state
}
})
}
// 访问state的时候，返回this._vm._data.$$state中的数据
get state() {
return this._vm._data.$$state
}
}
这样我们就基本实现了数据响应式更新
咱们先写个定时器改下state中的title测试一下
数据妥妥的更新了
但是咱们的代码不能一直都堆在constructor里，咱们把这个地方单独拿出来，放在一个函数里边
接下来考虑一下，vuex的getter是不是和vue的computed很像，都是在获取数据的时候有机会把数据修改为页面中想要的格式，既然是这样，咱们的getter也就很好实现了，下面接着来实现咱们的getter
首先写一个包装getter的函数，把getter用的state以及getters参数传过去
function registerGetter(store, type, rawGetter) {
store._getters[type] = function () {
return rawGetter(store.state, store.getters)
}
}
接着在把constructor中的this.getters = options.getters改为this._getters = Object.create(null)用来存放getters
然后调用咱们的registerGetter函数包装一下getter
然后把resetStoreVm函数改造为
function resetStoreVm(store, state) {
store.getters = {}
let computed = {}
let getters = store._getters
Object.keys(getters).forEach(key => {
// 把getter函数包装为computed属性
computed[key] = () => getters[key]()
// 监听是否用getters获取数据，computed是把咱们的数据直接存到根结点的，所有直接在_vm上边获取到数据返回出去就行
Object.defineProperty(store.getters, key, {
get: () => store._vm[key],
enumerable: true
})
})
store._vm = new Vue({
data: {
$$state: state
},
computed
})
}
到这里咱们已经利用vue的computed属性实现了getter，来看一下效果
可以看到用法基本与vuex一致且已经有了效果 OK 到这里getter先告一段落
接下来实现mutation
mutation作为更改 Vuex 的 store 中的状态的唯一方法，可谓是重中之重，咱们一起来实现一下
跟getter一样 也需要一个包装mutation的函数
function registerMutation(store, type, handler) {
store._mutations[type] = function (payload) {
return handler.call(store, store.state, payload)
}
}
然后在constructor中把this._mutations改为this._mutations = Object.create(null)，接着循环遍历options.mutations
Object.keys(options.mutations).forEach(type => {
registerMutation(this, type, options.mutations[type])
})
在vuex中不能直接调用mutation，而是需要使用store.commit
我们在Store类中加入commit方法
这个commit函数实现很简单，就是把咱们包装后的mutation执行一下而已
commit(type, payload) {
const handler = this._mutations[type]
handler(payload)
}
咱们来看下效果
效果虽然出来了，但是这样真的就可以了么？？在咱们的commit函数里咱们直接const handler = this._mutations[type]这样在this上边获取mutation，正常使用虽然没有问题，但是保不齐this指向错误的地方，js的this有多头疼你懂的。。。咱们来处理一下，把this固定到Store类上，改造之前咱们先来模拟下this指向不对的情况
点击button之后，程序就蹦了，这样肯定是不行的
动手改造，在constructor里增加如下代码
const store = this
let {
commit
} = this
this.commit = function boundCommit(type, payload) {
return commit.call(store, type, payload)
}
代码很好理解，不做赘述了。
代码执行👌，但是循环遍历包装getters和mutations的时候，代码还是散在constructor里的，虽然这样也可以，随着代码量的增加，这样会显得很乱，增加阅读代码的难度，咱们给他抽出来单独放在一个函数里
function register(store, options) {
Object.keys(options.getters).forEach(type => {
registerGetter(store, type, options.getters[type])
})
Object.keys(options.mutations).forEach(type => {
registerMutation(store, type, options.mutations[type])
})
}
constructor变成这样
然后就是Action
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters
老规矩
function registerAction(store, type, handler) {
store._actions[type] = function (payload) {
handler.call(store, {
dispatch: store.dispatch,
commit: store.commit,
getters: store.getters,
state: store.state
}, payload)
}
}
然后在咱们的register函数中循环遍历options.actions
Object.keys(options.actions).forEach(type => {
registerAction(store, type, options.actions[type])
})
以及把this固定到Store类上
let {
commit,
dispatch
} = this
this.commit = function boundCommit(type, payload) {
return commit.call(store, type, payload)
}
this.dispatch = function boundDispatch(type, payload) {
return dispatch.call(store, type, payload)
}
测试一下
看似没有问题，但是这样真的行了么？？ 在vuex中为了数据流向可控，在严格模式中只能通过mutation来修改state，在其他地方修改state会报错，这块咱们还没有处理。
咱们的state就是vue的data，vue的vm.$watch属性刚好就是观察Vue实例上的一个表达式或者一个函数计算结果的变化，咱们可以借助vm.$watch来做，在resetStoreVm函数中加上如下代码
store._vm.$watch(function () {
return this._data.$$state
}, () => {
throw new Error("state 只能通过mutation修改")
}, {
deep: true,
sync: true
})
光监听一下的话，问题有来了，mutation也是直接修改state，那么这个watch连在mutation中修改的state也会报错，所以咱们加一个状态来标示是否可以修改state
this._committing = false
这个_committing为true的时候可以修改state，为false的时候不可修改，这样咱们在mutation中修改的state时候先改变下_committing这个状态就可以了，因为在内部修改state的时候也需要修改_committing，这里咱们把代码单独拉出来写，封装为一个类方法，其他地方用的时候也方便
_withCommit(fn) {
const committing = this._committing
this._committing = true
fn()
this._committing = committing
}
写完之后，修改下咱们的commit方法，这样咱们就是实现在只能通过mutation来修改state
测试一下
Ok，咱们自己的myvuex就实现了，代码还有很多优化和待实现的地方，大家可以从github上把代码clone下来，优化和完善代码，github地址https://github.com/colinonce/myvuex
yarn link
with writing…
总结
总得来说vuex实现起来还是很简单的，在这个代码基础上很容易拓展出完整的vuex，哈哈，因为文中的代码就是参考vuex源码来写的，这样大家看完这篇文章再去阅读vuex源码就能轻松不少，也是考虑到实现完整版的意义不是很大，把vuex的实现方式和思想告诉大家才是最重要的，说白了，vuex的本质也是一个vue实例，它里面管理了公共部分数据state。
Thank You
篇幅很大，感谢大家耐心观看，文中如有错误欢迎指正，如有什么好的建议也可以在评论区评论或者加我微信交流。祝大家身体健康
我是
Colin，可以扫描下方二维码加我微信，备注交流。
546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
