手写 vuex4.0 实现原理

最新推荐文章于 2022-09-01 15:51:09 发布
最新推荐文章于 2022-09-01 15:51:09 发布
阅读量304 收藏 1
点赞数
分类专栏： vue 文章标签： vuex vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41614928/article/details/118763237
版权

在这里插入图片描述

首先我们来看一个小小的vuex4.0使用案例

App.vue

<template>
  <div> count: {{ count }} | double: {{ double }} </div>
  <!-- $store 是挂载到实例上，兼容 vue2 用的 -->
  <div> $store.state.count: {{ $store.state.count }} </div>
  <hr>
  <button @click="add">同步修改</button>
  <button @click="asyncAdd">异步修改</button>
</template>

<script>
import { computed, toRefs } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'App',
  setup() {
    const store = useStore('store1')
    function add() {
      store.commit('add', 1)
    }
    function asyncAdd() {
      store.dispatch('asyncAdd', 1)
    }

    return {
      add,
      asyncAdd,
      // ...toRefs(store.state)
      // 通过 computed 监听实现响应式,因为 count: store.state.count 就变成赋值了不具有响应式功能
      count: computed(() => store.state.count),
      double: computed(() => store.getters.double)
    }
  }
}
</script>

store/index.js

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  getters: {
    double(state) {
      return state.count * 2
    }
  },
  mutations: {
    add(state, payload) {
      state.count += payload
    }
  },
  actions: {
    asyncAdd({ commit }, payload) {
      setTimeout(() => {
        commit('add', payload)
      }, 1000)
    }
  }
})

export default store

main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
// Vue.use(store) 插件的用法， 会默认调用store中的install方法
createApp(App).use(store, 'store1').mount('#app')

手写一个 vuex4.0 需要实现以上功能，那么我们先从 main.js 出发，createApp(App) 会返回一个 vue 实例，其 use 方法接收一个含有 install 的 store 对象，并执行 install(vue, 'store1') vue实例 与 'store1' 作为参数，将 store 对象内的数据注入 vue 中。

那么 store 对象是怎么得到的呢？再看 store/index.js 我们可以发现 store 是通过
createStore({}) 得到的， 则由此看来 createStore 是一个函数接收一个对象作为参数并返回 store对象里面包含一个 install 方法。

【vuex 0.1版本 实现如下】

export function createStore(options) { // options 是传入的配置
  // todo options
  return {
      install(vue, injectKey) {}
  }
}

讲道理 createStore 方法需要对传入的 options 进行一些复杂的处理才能返回一个功能更全面的 store ，那么我们就写一个 class 来处理 options 吧！
这里还有一个知识点 vue3 中可以导出 import { provide, inject } from 'vue'
provide, inject 两种方法的官方说明：
父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。
想想这是不是可以拿来存储 vuex 的数据

【vuex 0.2版本 实现如下】

import { inject } from 'vue' // inject：获取store数据

export function createStore(options) {
  return new Store(options)
}

const storeKey = 'store'
export function useStore(injectKey = storeKey) { // 获取 vuex 内的数据
  return inject(injectKey)
}

// 这个 Store 类就是用来处理 options 的
class Store {
  constructor(options) {
    // todo options
  }
  install(vue, injectKey = storeKey) {
    // vue3 的 provide 方法将数据存入 _provides 需要时通过 inject 获取
    vue.provide(injectKey, this) // injectKey 为存入名称，取时通过 inject(injectKey) 取
    vue.config.globalProperties.$store = this // 将 $store 加到 vue3 实例上 （兼容 vue2）
  }
}

由 store/index.js 内注入 state 数据，在 App.vue 中我们可以看到 vuex 数据通过 const store = useStore('store1') 导出，通过 store.state.xxx 获取，则我们只需通过 reactive
(vue3 中的 reactive 方法可使传入的对象具有响应式功能) 让传入的 state 数据具有响应式

【vuex 0.3版本 实现如下】

import { inject } from 'vue' // inject：获取store数据

export function createStore(options) {
  return new Store(options)
}

const storeKey = 'store'
export function useStore(injectKey = storeKey) { // 获取 vuex 内的数据
  return inject(injectKey)
}

class Store {
  constructor(options) {
    const store = this // 把 this 写成 store 方便理解
    // 多一层 data 是为了解决 store._state.data = xxx 整个重新赋值导致失去响应式问题
    store._state = reactive({ data: options.state })
  }
  // 实现外部可通过 store.state 获取响应式数据
  get state() {
    return this._state.data
  }
  install(vue, injectKey = storeKey) {
    // vue3 的 provide 方法将数据存入 _provides 需要时通过 inject 获取
    vue.provide(injectKey, this) // injectKey 为存入名称，取时通过 inject(injectKey) 取
    vue.config.globalProperties.$store = this // 将 $store 加到 vue3 实例上 （兼容 vue2）
  }
}

那 vuex 中的 getters 又是怎么实现的呢？ 在 store/index.js 中我们发现 getters 是一个对象里面放的都是函数，可是在 App.vue 中我们是通过 store.getters.double 直接获取值，而不是 store.getters.double() 来获取返回的值，那这又是怎么实现的呢？ 想想是不是可以通过 Object.defineProperty 的 get 方法，当触发 get 时，我们自动执行 double() 方法直接返回值呢!

【vuex 0.4版本 实现如下】

import { reactive, inject } from 'vue' // reactive：响应式 | inject：获取store数据

export function createStore(options) {
  return new Store(options)
}

const storeKey = 'store'
export function useStore(injectKey = storeKey) { // 获取 vuex 内的数据
  return inject(injectKey)
}

class Store {
  constructor(options) {
    const store = this
    // 多一层 data 是为了解决 store._state.data = xxx 整个重新赋值导致失去响应式问题
    store._state = reactive({ data: options.state })
    
    // 实现 getters 其实就是实现一个计算属性
    const _getters = options.getters
    store.getters = {}
    forEachValue(_getters, function (fn, key) {
      Object.defineProperty(store.getters, key, {
        enumerable: true, // 可枚举
        get: () => fn(store.state) // 用 computed 包裹可以实现状态缓存
      })
    })
  }
  // 实现外部可通过 store.state 获取数据
  get state() {
    return this._state.data
  }
  install(vue, injectKey) {
    // vue3 的 provide 方法将数据存入 _provides 需要时通过 inject 获取
    vue.provide(injectKey, this) // injectKey 为存入名称，取时通过 inject(injectKey) 取
    vue.config.globalProperties.$store = this // 将 $store 加到 vue3 实例上 （兼容 vue2）
  }
}

// 此公共方法用于遍历获取对象的 value 与 key 传入回调函数
function forEachValue(obj, fn) {
  Object.keys(obj).forEach(key => fn(obj[key], key))
}

接下来就是实现 dispatch 与 commit 了，实现的关键点就是传入的 第一个参数 与它们执行时函数的 this 指向问题。这里我们用到了 () => {} 箭头函数 this 指向当前作用域的特性 与 js的 call 方法改变函数内部的 this 指向。

青铜版本 vuex4.0

import { reactive, inject } from 'vue' // reactive：响应式 | inject：获取store数据

export function createStore(options) {
  return new Store(options)
}

const storeKey = 'store'
export function useStore(injectKey = storeKey) {
  return inject(injectKey)
}

// 创建容器返回一个 store
class Store {
  constructor(options) {
    const store = this
    // 解决重新赋值问题 store._state.data = xxx
    store._state = reactive({ data: options.state })

    // 实现 getters 其实就是实现一个计算属性
    const _getters = options.getters
    store.getters = {}
    forEachValue(_getters, function (fn, key) {
      Object.defineProperty(store.getters, key, {
        enumerable: true,
        get: () => fn(store.state) // 用 computed 包裹可以实现状态缓存
      })
    })

    // 实现 dispatch commit
    const _mutations = options.mutations
    const _actions = options.actions
    store._mutations = Object.create(null) // 我们为什么不用 {} 来创建一个空对象呢，这样不是更简单吗？ 你错了 {} 创建的对象有原型链 性能低
    store._actions = Object.create(null)
    forEachValue(_mutations, function (mutation, key) {
      store._mutations[key] = (value) => {
        mutation.call(store, store.state, value) // call 方法将 mutation 函数的 this 指向 store
      }
    })
    forEachValue(_actions, function (action, key) {
      store._actions[key] = (value) => {
        action.call(store, store, value)
      }
    })
  }
  
  get state() {
    return this._state.data
  }
  
  // 箭头函数的目的是让 this 指向当前作用域，也就是本 Store 类：解决如：const { dispatch, commit } = useStore() 结构出来的 this 指向问题
  dispatch = (type, value) => {
    this._actions[type](value)
  }
  commit = (type, value) => {
    this._mutations[type](value)
  }
   
  // vue3 接收 install 方法为项目注入此 store 库，app 为引入的 vue3 根实例
  install(vue, injectKey = storeKey) {
    // vue3 的 provide 方法将数据存入 _provides 需要时通过 inject 获取
    vue.provide(injectKey, this) // injectKey 为存入名称，取时通过 inject(injectKey) 取
    vue.config.globalProperties.$store = this // 将 $store 加到 vue3 实例上 （兼容 vue2）
  }
}

// 此公共方法用于遍历获取对象的 value 与 key 传入回调函数
function forEachValue(obj, fn) {
  Object.keys(obj).forEach(key => fn(obj[key], key))
}

好了，大功告成！

CodeSandbox 效果演示

https://codesandbox.io/s/vuex4-70mgk?file=/src/App.vue
舜岳
关注
专栏目录
Vue3状态管理器Vuex4.0的进阶使用方案
Web_boom的博客
01-18 409
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
迁移vite步骤及采坑记录
青梅煮酒论英雄的博客
02-28 1999
背景分析 本次的目的不是直接用 vite 替换 vue-cli ，而是想同时保留 vite 和 vue-cli 。除去影响开发体验 webpack 和 vite 本质上都是入口文件 + 依赖分析 + 模块转换。vite 是 使用的时候进行处理（vite针 对第三方库有同样会进行预处理）， webpack 则是先全部处理完毕。当浏览器天然支持 ES module 之 后，实时处理变得可能。这也是 vite 启动速度快的原因。 步骤 1. 分析vue.config.js，安装相关依赖 yarn add vite
手写 Vuex 4.x
lcl130的专栏
02-01 1043
Vuex是官方提供的状态管理库，为了深入了解它的实现逻辑，本文我们一起来一步步实现它。 初始化 用法 // 1. 引入createStore函数 import { createStore } from "vuex"; // 2. 通过创建一个新的 store 实例 const store = createStore({ }); // 3. 将 store 实例作为插件安装 createApp(App).use(store).mount('#app') 模拟实现 // 创建一个生成Store的 ex
vuex4.0使用
m18565890306的博客
09-01 389
vuex4.0使用简单 复制就用
vuex4.0的食用方法
A_bad_boy_hahaha的博客
08-16 300
vuex4.0的安装 npm install vuex@4.0 在vite中使用vuex //store.js import { createStore } from 'vuex' import createPersistedState from "vuex-persistedstate"; const store = createStore({ state: { count: 10 }, mutations: { addStateCount(state, data) {
Vuex 4的基本使用
oi
03-27 1405
Vuex 4的基本使用Vuex 是什么？ Vuex 是什么？ 官方说法： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有
17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲
cYang2030的博客
12-09 6016
本文首发于17张思维导图，最全前端复习资料总结，转载请联系作者 前言 2020年最后一个月了，熬夜多天整理出17张思维导图，对前端面试复习知识点进行了最全的总结，分享给大家。每个知识点都尽量找到最好的文章来解释，通过思维导图的形式进行展示。 给大家准备了高清的思维导图和食用更加方便的PDF文档，全部聚合思维导图一张，分类思维导图17张，涉及前端开发的方方面面面，JS基础，工程化，性能优化，安全，框架等。如果您是准备面试，或者享扩展前端知识，都可以通过这个目录进行学习。 废话不多说，下面分类展开来说，收藏.
ES6模块化——笔记整理
ningma30000的博客
03-31 348
文章目录JavaScript 模块化发展史第一阶段第二阶段第三阶段第四阶段nodejsCommonJS模块的导出模块的导入CommonJS规范nodejs对CommonJS的实现浏览器端模块化的难题AMDCMDES6模块化简介基本导入导出模块的引入模块的基本导出和导入基本导出基本导入默认导入导出默认导出默认导入ES6模块化的其他细节 JavaScript 模块化发展史 第一阶段 在 JavaScr...
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---React篇
m0_59529616的博客
08-03 960
★★★ React 事件绑定原理 ★★★ React中的 setState 缺点是什么呢 ★★★ React组件通信如何实现 ★★★ 类组件和函数组件的区别 ★★★ 请你说说React的路由是什么？ ★★★★★ React有哪些性能优化的手段？ ★★★★ React hooks 用过吗，为什么要用？ ★★★★ 虚拟DOM的优劣如何？实现原理？ ★★★★ React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？
JavaScript 前端面试题！！！
木木木森林
10-29 772
JavaScript 前端面试精华1. 介绍 js 的基本数据类型。2. JavaScript 有几种类型的值？你能画一下他们的内存图吗？3. 什么是堆？什么是栈？它们之间有什么区别和联系？4. 内部属性 [[Class]] 是什么5. 介绍 js 有哪些内置对象？6. undefined 与 undeclared 的区别？7. null 和 undefined 的区别？8. 如何获取安全的 undefined 值？9. 说几条写 JavaScript 的基本规范？10. JavaScript 原型，原型链
使用vuex4初体验
qq_43115434的博客
07-05 240
什么是 vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应 用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。         上面的解释来自 vuex 官网。         看完很懵？什么是状态管理模式？什么是情况我们该使用 vuex ？   
CodeSandbox v3 发布，Web 项目的在线开发
weixin_34354945的博客
03-26 1182
开发四年只会写业务代码，分布式高并发都不会还做程序员？ CodeSandbox 近期发布了 v3 版本，CodeSan...
云IDE：CodeSandbox: 快速进行前端开发的云IDE
知行合一 止于至善
08-27 2305
相较于Eclipse Che或者Coder，CodeSandbox目前定位为快速进行Web开发的IDE和原型工具，目标定位与加快Web开发。
vuex4.0 使用 基础篇
fmoment的博客
11-26 5439
useStore使用 注意：一下所有测试用例均适用了命名空间，state、getters、mutations、actions均在user这个module里面 一、准备工作 1、准备user.js文件 在store文件夹下生成一个module文件夹，文件夹里面生成user.js文件，文件内容如下： let state = { username: 'admin', total: 0, accessToken: 'admin', avatar: '随意设置',
Vue3.0+vuex4.0尝鲜
eswang的CSDN博客
04-19 8177
前言 做题3.0出了beta版，这一段时间使用VCA的过程中，也接触了不少3.0的特性，除了些生态相关的东西，别的体验已经很好了，今天就基于vue-cli-plugin-vue-next搭建一个工程化的Vue3.0样例。 安装 注意，这个插件的TS的支持还没有做好，这里我们基于JS做。 yarn global add @vue/cli vue create vue3-beta-js-all 同...
vuex4.0中使用typescript, vuex4.0中modules的ts使用，vue3 + vuex4.0 + typescript 使用详情
热门推荐
一曲红尘诀
11-21 1万+
最新的vue3.x版本已经发布一段时间了，vue3 + vuex + ts 结合更加完美，简单介绍下在 vuex 中配置ts的一种方式, 下面基于vue3.x+ vuex4.x，配置之后只需要实现定义各个 state 的类型, 使用时完全不在需要再次关注，会自动推断。如下图示列中 @ 表示src的别名配置。 一、store文件夹目录介绍如下图所示，store文件夹下一级目录有index.ts 初始化vuex的配置, interface.ts 设置root层state类型, modules用来存放vuex.
Vuex4.0版本初学笔记（基于Vue3.0）
WJ的博客
03-06 780
Vuex4.0版本初学笔记（基于Vue3.0） devtools 离线编译安装 1、源码下载地址 2、yarn install安装依赖yarn run build编译 3、在chrom中打开开发者模式，点击“加载已解压的扩展程序”，选择源码目录packages/shell-chrome/ Vuex的基础使用 1、创建store import { createStore } from 'vuex' const store = createStore({ state() { r
react-router-dom系列之-codesandbox
web_longboss的博客
04-21 838
这窗口怎么泥小啊 偶的codesandbox，来踩踩
手写简易Vuex实现解析
"本文主要介绍了如何手写一个简易的 Vuex，适合已经使用过 Vuex 的开发者进一步理解其工作原理。文章通过展示一个简单的 Vuex 实现，包括核心类 `Store` 和 `install` 方法，以及如何使用 Vue 的 `Vue.use()` 方法来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值