广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > 其他 >深入了解vuex的实现原理
  • 546

0
分享到

深入了解vuex的实现原理

javascriptvuex 2023-05-14 22:05:47 546人浏览 独家记忆
摘要

当面试被问Vuex的实现原理，你要怎么回答？下面本篇文章就来带大家深入了解一下vuex的实现原理，希望对大家有所帮助！关于vuex就不再赘述，简单回顾一下：当应用碰到多个组件共享状态时，简单的单向数据流很容易被破坏：第一，多个视图依赖于同一

当面试被问Vuex的实现原理，你要怎么回答？下面本篇文章就来带大家深入了解一下vuex的实现原理，希望对大家有所帮助！

深入了解vuex的实现原理

关于vuex就不再赘述，简单回顾一下：当应用碰到多个组件共享状态时，简单的单向数据流很容易被破坏：第一，多个视图依赖于同一状态；第二，来自不同视图的行为需要变更同一状态。若解决前者使用传参的方式，则不适用于多层嵌套的组件以及兄弟组件；若解决后者使用父子组件直接引用或事件变更和同步状态的多份拷贝，则不利于代码维护。

所以，最好的办法是：把组件的共享状态抽取出，以一个全局单例模式管理！这也正是vuex背后的基本思想。

image.png

【相关推荐：vuejs视频教程、WEB前端开发】

所以，vuex的大致框架如下：

class Store {
    constructor() {
        // state
        // getters  
        // mutations
        // actions
    }
    // commit
    // dipatch
}

接下来，就写写看。

一、创建vue项目

vue create vue2-vuex//创建vue2项目

yarn add vuex@next --save//安装vuex

yarn serve//启动项目

二、实现原理

1、State

（1）使用

//store.js
// 仓库
import Vue from 'vue'
import Vuex from 'vuex'
import extra from './extra.js'

Vue.use(Vuex) //引入vuex的方式，说明Store需要install方法
export default new Vuex.Store({
    // 仓库数据源
    state: {
        count: 1,
        dowhat: 'addCount'
    },
}
//app.vue
<template>
    <div class="testState">
        <p>{{mycount}}</p>
        <p>{{dowhat}}:{{count}}</p>
    </div>
</template>

<script>
export default {
    import {
        mapState
    } from 'vuex'
    // 推荐方式
    computed: mapState()({
        mycount: state => state.count
    }),
    // 推荐方式的简写方式
    computed: {
        // 解构的是getters
        ...mapState(['count', 'dowhat'])
    },
  }
</script>

（2）注意

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性 中返回某个状态，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态

Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）

（3）实现

所以除了Store内部的五大属性以外，还需要考虑插件的一个install方法，所以大致框架如下：

class Store {
    constructor() {
        // state
        // getters  
        // mutations
        // actions
        //modules
    }
    // commit
    // dipatch
}
let Vuex = {
    Store,
    Install
}
export default Vuex

所以，接下来就可以具体实现了，

class Store {
    constructor(options) {
        // state
        this.state = options.state
    }
}
let install = function(_Vue) {
    _Vue.mixin({
        beforeCreate() { //在组件创建之前自动调用，每个组件都有这个钩子
            if (this.$options && this.$options.store) { //this.$options读取根组件
                this.$store = this.$options.store
            } else {
                this.$store = this.$parent && this.$parent.$store
            }
        }
    })
}

然而，上述的state的实现有一个缺点：当改变数据的时候，state的数据不能动态的渲染。所以如何把state里的数据成为响应式成为关键问题？实际上，类似vue里的data，也可以通过这种方式让其成为响应式。那么就得从install方法中传入Vue，所以改变后：

let Vue=null
class Store {
    constructor(options) {
        // state
        this.vm = new _Vue({
          data: {
            state: options.state//data中的数据才是响应式
          }
        })
    }
      get state() {
        return this.vm.state
    }
}
let install = function(_Vue) {//用于Vue.use(plugin)
    Vue=_Vue
    _Vue.mixin({
        onBeforeCreate() { //在组件创建之前自动调用，每个组件都有这个钩子
            if (this.$options && this.$options.store) { //this.$options读取根组件
                this.$store = this.$options.store
            } else {
                this.$store = this.$parent && this.$parent.$store
            }
        }
    })
}

2、getters

（1）使用

//store.js
export default new Vuex.Store({
    // 计算属性
    getters: {
        // 这里的函数不需要调用，可以直接使用，官方默认前面有get
        getCount(state) {//接受 state 作为其第一个参数
            return state.count * 100;
        }
    },
}

（2）注意

有时候我们需要从 store 中的 state 中派生出一些状态（比如增加，删除，过滤等等），Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，Getter 接受 state 作为其第一个参数，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果

（3）实现

 // getters
    let getters = options.getters || {}
    this.getters = {}
    Object.keys(getters).forEach(getterName => {
      Object.defineProperty(this.getters, getterName, {
        get: () => {
          return getters[getterName](this.state)
        }
      })
    })

3、mutations

（1）使用

//store.js
export default new Vuex.Store({
        // 相当于methods
    mutations: {
        // mutations内部的函数，天生具备一个形参
        add(state, n) {
            state.count += n;
        },
        decrease(state, n) {
            state.count -= n;
        }
    },
}
methods: {
            submit() {
                console.log('success');
            },

            // 解构仓库mutations里面的方法，要啥解构啥
            ...mapMutations(['add', 'decrease']),
            // this.$store.commit('add'),
                
            ...mapActions(['addAction', 'decreaseAction']),
            // this.addAction()调用actions里面的方法
            // this.$store.dispatch('add'),
}

（2）注意

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler) 。这个回调函数就是进行状态更改的地方，并且它会接受 state 作为第一个参数，不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法

可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload） ，在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读

（3）实现

   // mutations
    let mutations = options.mutations || {}
    this.mutations = {}
    Object.keys(mutations).forEach(mutationName => {
      this.mutations[mutationName] = (arg) => {//保证多个（第二个）参数的传入
        mutations[mutationName](this.state, arg)
      }
    })
    
    commit = (method, arg) => {//使用箭头函数改变被调用的this的指向
        // console.log(this);
        this.mutations[method](arg)
  }

4、actions

（1）使用

//store.js
export default new Vuex.Store({
    actions: {
        addAction(context) {
            // 在这里调用add方法
            context.commit('add', 10);
        },
        decreaseAction({
            commit
        }) {
            commit('decreaseAction', 5)
        }
    },
}

（2）注意

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作
  • Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
  • Action 通过 store.dispatch 方法触发
  • Action 通常是异步的，store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise
  • 一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行

（3）实现

    // actions
    let actions = options.actions || {}
    this.actions = {}
    Object.keys(actions).forEach(actionName => {
      this.actions[actionName] = (arg) => {
        actions[actionName](this, arg)
      }
    })
    
   dispatch=(method, arg) =>{
    this.actions[method](arg)
  }

5、modules

（1）使用

    // actions
    let actions = options.actions || {}
    this.actions = {}
    Object.keys(actions).forEach(actionName => {
      this.actions[actionName] = (arg) => {
        actions[actionName](this, arg)
      }
    })
    
   dispatch=(method, arg) =>{
    this.actions[method](arg)
  }
    //store.js
    modules: {
        extra: extra
    }

（2）注意

  • 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿，Vuex 允许我们将 store 分割成模块（module） 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
  • 对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象
  • 对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState

  • 对于模块内部的 getter，根节点状态(rootState)会作为第三个参数暴露出来

三、整体代码

let Vue = null//全局的_Vue

class Store {
  constructor (options) {
    // state
    //this.state = options.state 写法不完美，当改变数据的时候，不能动态的渲染，所以需要把data中的数据做成响应式的
    this.vm = new _Vue({
      data: {
        state: options.state//data中的数据才是响应式
      }
    })

    // getters
    let getters = options.getters || {}
    this.getters = {}
    Object.keys(getters).forEach(getterName => {
      Object.defineProperty(this.getters, getterName, {
        get: () => {
          return getters[getterName](this.state)
        }
      })
    })

    // mutations
    let mutations = options.mutations || {}
    this.mutations = {}
    Object.keys(mutations).forEach(mutationName => {
      this.mutations[mutationName] = (arg) => {//保证多个（第二个）参数的传入
        mutations[mutationName](this.state, arg)
      }
    })

    // actions
    let actions = options.actions || {}
    this.actions = {}
    Object.keys(actions).forEach(actionName => {
      this.actions[actionName] = (arg) => {
        actions[actionName](this, arg)
      }
    })

  }

  dispatch=(method, arg) =>{
    this.actions[method](arg)
  }

  commit = (method, arg) => {
    // console.log(this);
    this.mutations[method](arg)
  }

  get state() {
    return this.vm.state
  }

}

let install = function(_Vue) {
  Vue = _Vue
  Vue.mixin({
    beforeCreate() {//在组件创建之前自动调用，每个组件都有这个钩子
      if (this.$options && this.$options.store) {  // this.$options读取到根组件
        this.$store = this.$options.store
      } else { // //如果不是根组件的话，也把$store挂到上面,因为是树状组件
        this.$store = this.$parent && this.$parent.$store
      }
    }
  })
}

let Vuex = {
  Store,
  install
}

export default Vuex

（学习视频分享：vuejs入门教程、编程基础视频）

以上就是深入了解vuex的实现原理的详细内容，更多请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 深入了解vuex的实现原理

本文链接: https://www.lsjlt.com/news/207130.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 深入了解vuex的实现原理
    当面试被问vuex的实现原理，你要怎么回答？下面本篇文章就来带大家深入了解一下vuex的实现原理，希望对大家有所帮助！关于vuex就不再赘述，简单回顾一下：当应用碰到多个组件共享状态时，简单的单向数据流很容易被破坏：第一，多个视图依赖于同一...
    99+
    2023-05-14
    javascript vuex
  • React深入了解原理
    目录VDOM（虚拟dom）Fiber架构初始化渲染更新时render阶段commit阶段VDOM（虚拟dom） react和vue都是基于vdom的前端框架。 web界面由DOM树来...
    99+
    2022-11-13
  • 深入了解Go的interface{}底层原理实现
    目录1. interface{}初探2. eface3. iface4. 接口转化1. interface{}初探 Go是强类型语言，各个实例变量的类型信息正是存放在inter...
    99+
    2022-06-07
    GO interface
  • 深入了解Golang interface{}的底层原理实现
    目录前言interface数据结构ifaceeface总结前言 在 Go 语言没有泛型之前，接口可以作为一种替代实现，也就是万物皆为的 interface。那到底 interface...
    99+
    2022-11-11
  • 深入了解Vue3中侦听器watcher的实现原理
    目录watch API 的用法watch API实现原理标准化source构造回调函数创建scheduler创建effect返回销毁函数异步任务队列的设计异步任务队列的创建异步任务队...
    99+
    2022-11-13
  • 深入了解PHP底层机制与实现原理
    深入了解PHP底层机制与实现原理PHP是一种广泛应用的服务器端脚本语言，它的底层机制和实现原理对于理解其工作原理和优化性能都具有重要意义。本文将深入探讨PHP的底层机制与实现原理，并配以具体代码示例，以帮助读者更好地理解和应用PHP。PHP...
    99+
    2023-11-08
    实现原理 深入了解 PHP底层机制
  • 深入理解Vuex的作用
    目录概述组件之间共享数据的方式Vuex原理简介Vuex是实现组件全局状态(数据)管理的一种机制什么样的数据适合存储到Vuex中Vuex的基本使用1.安装Vuex依赖包2.导入Vuex...
    99+
    2022-11-12
  • 深入了解Vue.js中的Vuex状态管理模式
    目录Vuex使用安装vuex配置vuex页面刷新数据丢失问题Vuex Vuex 是一个专为 Vue.js 开发的状态管理模式。主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟...
    99+
    2023-05-19
    Vuex状态管理模式 Vuex状态管理
  • Vuecomputed实现原理深入讲解
    目录定义依赖收集依赖触发依赖总结在从vue(v2.7.10)源码分析vue是如何收集依赖和触发依赖这篇文章中我们讲了vue是怎么收集依赖的。其中computed的实现原理和这个密切相...
    99+
    2022-11-13
    Vue computed用法 Vue computed的作用 Vue computed
  • 深入了解vue-router原理并实现一个小demo
    目录插件编写的基本方法需求分析我们先看看vue-router的使用步骤由此我们看看vue-router内部做了什么？实现思路首先我们看看如何将$router挂载到组件上​​如何实现那...
    99+
    2022-11-13
  • 深入了解Android IO的底层原理
    目录前言一、应用层1. IO的分类1.1 缓冲和直接1.2 阻塞和异步2. IO流程二、sysCall系统调用三、虚拟文件系统1. VFS结构2. VFS中的缓存3. IO流程四、文...
    99+
    2022-11-13
  • 深入解析HetuEngine实现OnYarn原理
    目录什么是On Yarn？HetuEngine架构HetuEngine On Yarn原理依赖文件租户绑定资源管理客户端使用摘要：本文介绍HetuEngine实现On Yarn的原理...
    99+
    2022-11-12
  • require加载器实现原理的深入理解
    前言 我们常说node并不是一门新的编程语言，他只是javascript的运行时，运行时你可以简单地理解为运行javascript的环境。在大多数情况下我们会在浏览器中去运行java...
    99+
    2022-11-12
  • 深入了解JavaSpringBoot自动装配原理
    目录自动装配原理SpringBootApplicationEnableAutoConfigurationAutoConfigurationImportSelector总结在...
    99+
    2022-11-13
  • 深入解析MySQL MVCC 原理与实现
    深入解析MySQL MVCC 原理与实现MySQL是目前最流行的关系型数据库管理系统之一，它提供了多版本并发控制（Multiversion Concurrency Control，MVCC）机制来支持高效并发处理。MVCC是一种在数据库中处...
    99+
    2023-10-22
    原理 MySQL mvcc
  • 深入详解Vue3ref底层实现原理
    目录前言源码解析实践操作class类的get和set是什么结论前言 随着现在vue3越来越普及，相应的面试题也多了起来 说到vue3的面试题，有一个最经典的就是ref和reactiv...
    99+
    2023-05-17
    Vue3 ref实现原理 Vue3 ref原理 Vue3 ref
  • 深入了解Vue3中props的原理与使用
    目录前言介绍原理前提创建组件实例对象初始化Props操作创建proxy对象去获取Propsprops作为参数传入setup将proxy挂载到render上总结前言 props指父组件...
    99+
    2023-05-19
    Vue3 props原理 Vue3 props使用 Vue3 props
  • 深入了解JavaScript中递归的理解与实现
    目录前言递归的基本理解实例解析求斐波那契数时间复杂度分析空间复杂度分析执行顺序分析前言 我们在写业务代码的时候，或多或少都会遇到需要使用递归的场景，比如在遍历树形结构时。 本文将通过...
    99+
    2022-11-13
  • 深入了解Spring控制反转IOC原理
    目录一、什么是Spring IOC容器二、IOC有哪些优点三、控制反转（IOC）有什么作用四、IoC和DI有什么区别五、Spring IoC的实现机制六、IoC支持哪些功能七、Bea...
    99+
    2022-11-13
    Spring控制反转IOC Spring控制IOC Spring IOC
  • 带你深入了解Vue.$nextTick（原理浅析）
    白话一点就是说，其实这是和JS当中的事件循环是息息相关的，就是Vue不可能对每一个数据变化都做一次渲染，它会把这些变化先放在一个异步的队列当中，同时它还会对这个队列里面的操作进行去重，比如你修改了这个数据三次，它只会保留最后一次。这些变化是...
    99+
    2023-05-14
    $nextTick 前端 Vue.js
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作