手写一个vuex?

这篇具有很好参考价值的文章主要介绍了手写一个vuex?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

vuex是一种专为Vue.js应用程序开发的状态管理模式,挂载在全局中,具有响应式特性

vuex的实现原理主要包括以下几个方面:

  • 是一个对象,vuex有两个属性,一个是Store类,一个是install方法。
  • Store类:用来创建store实例的,它接收一个对象作为参数,包含state, getters, mutations, actions等属性。
  • install方法:用来将store实例注入到每个Vue组件中的,它利用了Vue的mixin机制,在beforeCreate钩子中执行vuexInit方法,将store实例挂载到每个组件的$store属性上。
  • state:利用Vue的响应式data实现的,它将用户传入的state对象作为new Vue的data选项,从而实现了state的数据响应。
  • getters:利用Vue的计算属性computed实现的,它将用户传入的getters对象作为new Vue的computed选项,从而实现了getters的缓存和依赖追踪。
  • vuex的mutations是用来同步修改state的方法,它只能接收两个参数,一个是state,一个是payload,它必须是同步函数,不能包含异步操作。
  • actions:用来异步修改state的方法,它可以接收一个context对象作为参数,包含state, getters, commit, dispatch等属性,它可以包含异步操作,但最终还是要通过commit调用mutations来修改state。
  • vuex还提供了一些辅助函数,如mapState, mapGetters, mapMutations, mapActions等,用于简化组件中的store访问和操作。

下面是一个简单的代码示例,用于说明vuex的实现原理:

// vuex.js
let Vue // 保存Vue构造函数,插件中要使用

class Store {
  constructor(options) {
    // 保存选项
    this.$options = options

    // 定义响应式的state
    this._vm = new Vue({
      data: {
        $$state: options.state // 加两个$,Vue不做代理
      },
      computed: options.getters // 将getters定义为计算属性
    })

    // 定义commit和dispatch方法
    this.commit = this.commit.bind(this)
    this.dispatch = this.dispatch.bind(this)

    // 定义wrappedGetters
    this.wrappedGetters = {}

    // 实现getters,按照getters的定义挂载到store实例
    const computed = {}
    Object.keys(this.$options.getters).forEach(key => {
      // 获取用户定义的getter
      const fn = this.$options.getters[key]
      // 转换为computed可以使用无参数形式
      computed[key] = () => {
        return fn(this.state, this.getters)
      }
      // 为wrappedGetters定义只读属性
      Object.defineProperty(this.wrappedGetters, key, {
        get: () => this._vm[key]
      })
    })

    // 实现mutations
    this.mutations = {}
    Object.keys(this.$options.mutations).forEach(key => {
      this.mutations[key] = payload => {
        this.$options.mutationskey
      }
    })

    // 实现actions
    this.actions = {}
    Object.keys(this.$options.actions).forEach(key => {
      this.actions[key] = payload => {
        this.$options.actionskey
      }
    })
  }

  // 存取器,state只读
  get state() {
    return this._vm._data.$$state
  }

  set state(v) {
    console.error('不能直接修改state,请使用replaceState')
  }

  // 存取器,getters只读
  get getters() {
    return this.wrappedGetters
  }

  // commit,执行mutation
  commit(type, payload) {
    // 获取type对应的mutation
    const fn = this.mutations[type]

    if (!fn) {
      // 未定义的mutation
      console.error(`mutation ${type} 不存在`)
      return
    }

    // 传入state和负载
    fn(payload)
  }

  // dispatch,执行action
  dispatch(type, payload) {
    // 获取type对应的action
    const fn = this.actions[type]

    if (!fn) {
      // 未定义的action
      console.error(`action ${type} 不存在`)
      return
    }

    // 传入当前Store实例和负载
    return fn(payload)
  }
}

// install方法
function install(_Vue) {
  Vue = _Vue // 保存Vue构造函数

  // 混入
  Vue.mixin({
    beforeCreate() {
      // 此时,上下文已经是组件实例了
      // 如果this是根实例,则它的$options里面会有store实例
      if (this.$options.store) {
        Vue.prototype.$store = this.$options.store
        // 以后就能在组件中拿到 $store
      }
    }
  })
}

// 导出对象
export default { Store, install }

然后在app.js文件中引入使用文章来源地址https://www.toymoban.com/news/detail-770370.html

// 引入Vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 使用Vuex插件
Vue.use(Vuex)

// 创建一个store实例
const store = new Vuex.Store({
  // 定义state
  state: {
    count: 0
  },
  // 定义getters
  getters: {
    doubleCount: state => state.count * 2
  },
  // 定义mutations
  mutations: {
    increment(state, payload) {
      state.count += payload
    }
  },
  // 定义actions
  actions: {
    incrementAsync(context, payload) {
      setTimeout(() => {
        context.commit('increment', payload)
      }, 1000)
    }
  }
})

// 在组件中使用store
new Vue({
  el: '#app',
  store,
  ...
})

到了这里,关于手写一个vuex?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 手写vuex

    vuex是作为插件使用,Vue.use(vuex) 最后注册给new Vue的是一个new Vuex.Store实例 根实例 组件 比如这里,App是vue实例的子组件即渲染组件 getters:注册参数state mutation: (state, payload) actions: ({ commit, dispatch }, payload) ?模板编译语法 install:接收注入的参数Vue,那么这个插件就是不需

    2024年02月15日
    浏览(36)
  • 手写 Vuex4 源码

    本文首发于掘金,未经许可禁止转载 Vuex4 是 Vue 的状态管理工具,Vuex 和单纯的全局对象有以下两点不同: Vuex 的状态存储是响应式的 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地 提交 (commit) mutation 。 本文手写部分分为八个部分,基本包含了 Vue

    2024年02月14日
    浏览(48)
  • 【Vue】学习笔记-Vuex

    概念:专门在vue中实现集中式状态(数据) 管理的一个vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信 Vuex Gihub地址 多个组件依赖于同一状态 来自不同组件的行为需要变更同一状态 。 使用纯vue编写 sr

    2024年02月07日
    浏览(33)
  • 开始学习Vue2(axios和Vuex)

    一、 Axios 1、 Axios  简介 Axios   是一个基于  promise   网络请 求库 ,作用于 node.j s  和浏   览器中。它是  isomorphic  的(即同一套代码可以运行在浏览器 和 node.js 中)。在服务端它使用原生  node.js http  模块,  而在 客户端   (浏览端)   则使用   XMLHttpRequests。 2、 Axios  的

    2024年02月20日
    浏览(35)
  • 记录-JavaScript常规加密技术

    当今Web开发中,数据安全是一个至关重要的问题,为了确保数据的安全性,我们需要使用加密技术。JavaScript作为一种客户端编程语言,可以很好地为数据进行加密。在本篇文章中,我们将为你提供一个常规JavaScript加密大全,以及案例代码来演示如何使用它们。 Base64是一种将

    2023年04月18日
    浏览(37)
  • 前端项目部署自动检测更新后通知用户刷新页面(前端实现,技术框架vue、js、webpack)——方案一:编译项目时动态生成一个记录版本号的文件

    当我们重新部署前端项目的时候,如果用户一直停留在页面上并未刷新使用,会存在功能使用差异性的问题,因此,当前端部署项目后,需要提醒用户有去重新加载页面。 vue、js、webpack 编译项目时动态生成一个记录版本号的文件 轮询(20s、自己设定时间)这个文件,判断版

    2024年02月02日
    浏览(64)
  • Vue-Element-Admin项目学习笔记(6)Vuex状态管理

    前情回顾: vue-element-admin项目学习笔记(1)安装、配置、启动项目 vue-element-admin项目学习笔记(2)main.js 文件分析 vue-element-admin项目学习笔记(3)路由分析一:静态路由 vue-element-admin项目学习笔记(4)路由分析二:动态路由及permission.js vue-element-admin项目学习笔记(5)路由分析

    2024年02月09日
    浏览(49)
  • pytorch学习——如何构建一个神经网络——以手写数字识别为例

    目录 一.概念介绍 1.1神经网络核心组件 1.2神经网络结构示意图 1.3使用pytorch构建神经网络的主要工具 二、实现手写数字识别 2.1环境 2.2主要步骤 2.3神经网络结构 2.4准备数据 2.4.1导入模块 2.4.2定义一些超参数 2.4.3下载数据并对数据进行预处理 2.4.4可视化数据集中部分元素  2

    2024年02月14日
    浏览(33)
  • 【10个适合新手的人工智能项目 - 02】手写数字识别:使用Python和机器学习算法,编写一个手写数字识别程序,能够识别手写数字图像并将其转换为数字。

    为了编写一个手写数字识别程序,我们需要使用Python编程语言和一些机器学习算法。在这个项目中,我们将使用深度学习神经网络模型,它被广泛应用于图像识别任务。 以下是手写数字识别程序的基本步骤: 首先,我们需要一个数据集,用于训练和测试我们的模型。一个常

    2024年02月03日
    浏览(57)
  • AI编程助手 Kodezi : 记录、分享一个 VS code 插件

    了解 Kodezi! Kodezi 是一个 AI 开发平台,它提供的功能可以最大限度地提高编程效率。 Kodezi 使用大参数语言模型,这些模型是在来自各种开源场所的自然语言和编程语言集合上训练的; 使用详细信息自动调试代码; 根据上下文优化您的代码; 将代码从一种编程语言转换为另

    2023年04月16日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包