手写Vuex源码

最新推荐文章于 2024-03-30 10:53:26 发布
最新推荐文章于 2024-03-30 10:53:26 发布
阅读量140 收藏
点赞数
文章标签： vuex vue 大前端 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35526165/article/details/108187047
版权

vuex基本使用方式

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    //统一状态管理
    state: {
        name: '李明'
    },
    //状态更改
    mutations: {},
    //异步提交更改
    actions: {},
    modules: {}
})

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
    store,
    render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    {{$store.state}}
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

输出：
在这里插入图片描述

分析vuex结构

打印Vuex：
在这里插入图片描述
打印Vue实例：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

let vm = new Vue({
    store,
    render: h => h(App),
}).$mount('#app')

console.dir(vm)

在这里插入图片描述
可见，store绑定在$options中。

在这里插入图片描述
可见，$store绑定在Vue实例中，因此可以通过获取 $options 的store，绑定给$store。

vuex源码实现

1、创建基本结构

vuex/index.js

const install = (_Vue) => {
    console.log(_Vue)
}

class Store {

}

export default {
    install,
    Store,
}

Vue.use(Vuex)会调用install，因此需要创建install方法。
store.js使用了new Vuex.Store，因此需要创建Store类。

输出_Vue（Vue.use在调用install方法时传入参数_Vue）：
在这里插入图片描述
注意：
这里使用_Vue获取Vue实例而不是使用import，因为main.js也导入了Vue，如果使用import，会打包多次。

2、实现数据传递：state

const install = (_Vue) => {
    let Vue = _Vue;
    // console.dir(Vue)

    //给所有组件添加共同的功能
    Vue.mixin({
        //这里是为了在组件创建之前，给其传入数据
        beforeCreate() {
            //判断组件自身是否存在store
            if (this.$options && this.$options.store) this.$store = this.$options.store;
            //不存在则寻找父组件的$store(需要加$)
            else this.$store = this.$parent && this.$parent.$store;
        },
    })
}

class Store {
    constructor(options = {}) {
        //参数赋值
        this.state = options.state;
    }
}

export default {
    install,
    Store,
}

3、实现状态修改：mutations

export default new Vuex.Store({
    //统一状态管理
    state: {
        name: '李明',
        age: 18,
    },
    //状态更改
    mutations: {
        //年龄增加
        addAge(state, payload) {
            state.age += payload;
        }
    },
    //异步提交更改
    actions: {},
    modules: {}
})

<template>
  <div id="app">
    姓名：{{$store.state.name}}<br>
    年龄：{{$store.state.age}}<br>
    <button @click="add">长一岁</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  methods:{
    add() {
      this.$store.commit('addAge',1);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


class Store {
    constructor(options = {}) {
        //参数赋值
        this.state = options.state;
        this.mutations = options.mutations;
    }

    //提交修改
    commit(mutationName, payload) {

        //遍历mutations绑定的所有方法名称
        Object.keys(this.mutations).forEach(name => {
            //如果和传入的方法名称相同，则调用
            if (mutationName === name) this.mutations[mutationName](this.state, payload);
        });
    }
}

在这里插入图片描述
这里可以看到，虽然$store.state.age已经被修改，但是视图依然没有更新，因此可以将其添加到Vue的data中，实现双向绑定。

let Vue;

const install = (_Vue) => {
    Vue = _Vue;

    //给所有组件添加共同的功能
    Vue.mixin({
        //这里是为了在组件创建之前，给其传入数据
        beforeCreate() {
            //判断组件自身是否存在store
            if (this.$options && this.$options.store) this.$store = this.$options.store;
            //不存在则寻找父组件的$store(需要加$)
            else this.$store = this.$parent && this.$parent.$store;
        },
    })
}

class Store {
    constructor(options = {}) {
        //实现双向绑定
        let v = new Vue({
            data() {
                return {
                    state: options.state,
                    mutations: options.mutations,
                }
            },
        });

        //参数赋值
        this.state = v.state;
        this.mutations = v.mutations;
    }

    //提交修改
    commit(mutationName, payload) {

        //遍历mutations绑定的所有方法名称
        Object.keys(this.mutations).forEach(name => {
            //如果和传入的方法名称相同，则调用
            if (mutationName === name) this.mutations[mutationName](this.state, payload);
        });
    }
}

export default {
    install,
    Store,
}

4、实现异步状态修改：action

import Vue from 'vue'
import Vuex from 'vuex'

//调用install
Vue.use(Vuex)

export default new Vuex.Store({
    //统一状态管理
    state: {
        name: '李明',
        age: 18,
    },
    //状态更改
    mutations: {
        //年龄增加
        addAge(state, payload) {
            state.age += payload;
        }
    },
    //异步提交更改
    actions: {
        //异步年龄增加
        asyncAddAge({ commit }, payload) {
            setTimeout(() => {
                commit('addAge', payload);
            }, 1000);
        }
    },
    modules: {}
})

<template>
  <div id="app">
    姓名：{{$store.state.name}}<br>
    年龄：{{$store.state.age}}<br><br>
    <button @click="add">长一岁</button><br><br>
    <button @click="asyncAdd">1秒后长一岁</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  methods:{
    add() {
      this.$store.commit('addAge',1);
    },
    asyncAdd() {
      this.$store.dispatch('asyncAddAge',1);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


let Vue;

const install = (_Vue) => {
    Vue = _Vue;

    //给所有组件添加共同的功能
    Vue.mixin({
        //这里是为了在组件创建之前，给其传入数据
        beforeCreate() {
            //判断组件自身是否存在store
            if (this.$options && this.$options.store) this.$store = this.$options.store;
            //不存在则寻找父组件的$store(需要加$)
            else this.$store = this.$parent && this.$parent.$store;
        },
    })
}

class Store {
    constructor(options = {}) {
        //实现双向绑定
        let v = new Vue({
            data() {
                return {
                    state: options.state,
                    mutations: options.mutations,
                    actions: options.actions,
                }
            },
        });

        //参数赋值
        this.state = v.state;
        this.mutations = v.mutations;
        this.actions = v.actions;

    }

    //提交修改
    commit = (mutationName, payload) => {
        //遍历mutations绑定的所有方法名称
        Object.keys(this.mutations).forEach(name => {
            //如果和传入的方法名称相同，则调用
            if (mutationName === name) this.mutations[mutationName](this.state, payload);
        });
    }

    //异步提交修改
    dispatch = (actionName, payload) => {
         //遍历actions绑定的所有方法名称
        Object.keys(this.actions).forEach(name => {
            if (actionName === name) this.actions[actionName]({ commit: this.commit }, payload);
        })
    }
}

export default {
    install,
    Store,
}

注意：
这里方法格式需要写成xxx = () => {}，否则会出现this指向underfined的问题。

5、实现数据获取：getters

store/index.js

getters: {
        getName(state) {
            return state.name;
        }
    }

App.vue

姓名：{{$store.getters.getName}}

let Vue;

const install = (_Vue) => {
    Vue = _Vue;

    //给所有组件添加共同的功能
    Vue.mixin({
        //这里是为了在组件创建之前，给其传入数据
        beforeCreate() {
            //判断组件自身是否存在store
            if (this.$options && this.$options.store) this.$store = this.$options.store;
            //不存在则寻找父组件的$store(需要加$)
            else this.$store = this.$parent && this.$parent.$store;
        },
    })
}

class Store {
    constructor(options = {}) {
        //实现双向绑定
        let v = new Vue({
            data() {
                return {
                    state: options.state,
                    mutations: options.mutations,
                    actions: options.actions,
                    getters: options.getters,
                }
            },
        });

        //参数赋值
        this.state = v.state;
        this.mutations = v.mutations;
        this.actions = v.actions;
        this.getters = {};

		//定义getters
        Object.keys(v.getters).forEach(name => {
            Object.defineProperty(this.getters, name, {
                get: () => {
                    return v.getters[name](this.state);
                }
            })
        })
    }

    //提交修改
    commit = (mutationName, payload) => {
        //遍历mutations绑定的所有方法名称
        Object.keys(this.mutations).forEach(name => {
            //如果和传入的方法名称相同，则调用
            if (mutationName === name) this.mutations[mutationName](this.state, payload);
        });
    }

    //异步提交修改
    dispatch = (actionName, payload) => {
        //遍历actions绑定的所有方法名称
        Object.keys(this.actions).forEach(name => {
            if (actionName === name) this.actions[actionName]({ commit: this.commit }, payload);
        })
    }
}

export default {
    install,
    Store,
}
chent_某位
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-source:这是Vue手写源代码的仓库
05-10
vue-source This is a warehouse for handwritten Vue source code 一.开发环境搭建 Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码， rollup.js更专注于Javascript类库打包 （开发应用时使用Wwebpack，开发库时使用Rollup 安装rollup环境 npm install @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve cross-env -D ==rollup.config.js文件编写== import babel from 'rollup-plugin-babel'; import serve from 'rollup-plugin-serve'; exp
【手写 Vuex 源码】第十三篇 - Vuex 辅助函数的实现
BraveWangDev
02-15 512
本篇，主要介绍了 Vuex 辅助函数的实现，主要涉及以下几个点：1，Vuex 辅助函数作用和功能介绍；2，Vuex 辅助函数使用介绍；3，Vuex 辅助函数原理分析与代码实现；
学习vue源码（9）手写代码生成器
最新发布
weixin_42179304的博客
03-30 557
type: 2,}]使用例子中的模板生成后的 AST 来生成 render 后是这样的：render:格式化后是这样的：return _c(‘div’,_c(‘p’,生成后的代码字符串中看到了有几个函数调用 _c，_v，_s。_c 对应的是 createElement，它的作用是创建一个元素。第一个参数是一个HTML标签名第二个参数是元素上使用的属性所对应的数据对象，可选项第三个参数是 children例如：一个简单的模板：格式化后：return _c(‘p’,},
【手写 Vuex 源码】第一篇 - Vuex 的基本使用
BraveWangDev
02-09 906
本篇，介绍了 vuex 的基本用法，主要包含以下几个点：1，vuex 项目创建；2，vuex 工作流程介绍；3，vuex 的基本使用介绍；
手写 Vuex4.x 核心（Vuex源码实现）
qq_49900295的博客
09-19 1079
我们先做一个小的 TodoList 的案例，应用 vuex 来实现，然后逻辑跑通之后再在此的基础上我们一点点手写自己的 vuex ，进而实现和原来一样的效果。采用 vite 创建项目： 安装vuex： 删掉 hellowolrd.vue，在 src 目录下新建 store 文件夹，完善 vuex 结构：在 main.js 中引入： 根据 TodoList 的逻辑，我们来编写 vuex 的实现：state.js： 在 state 中 todos 存储着所有信息，filter 则是当前整体的
手写vuex源码
MiemieWan的博客
05-07 183
一、项目准备 创建vue项目 vue create projectName 进入项目 cd projectName 安装vuex vue add vuex 在store/index.js中写上测试代码： import Vue from "vue"; import Vuex from "./jvuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { count: 1 }, mutations:
手写输入源码
02-07
显示屏 手写输入 源码 可以学作为中 高级读者使用 ；
手写springmvc源码
11-04
-------------------------1、技术工具选型------------------------- JDK: jdk1.8.1 J2EE: Servlet-api2.5 WEB Container： Tomcat8.5 IDE： IntelliJ IDEA2017 ... Apache maven3.5.4 -------------------------...
PDF手写签名源码
09-28
为您提供PDF手写签名源码下载， PDF手写签名源码使用了第三方PDF阅读器源码mupdf类库。打开以后先对手机文件目录的显示及操作选择PDF文件后会读取并显示pdf内容点击menu键可以显示一些选项、如签名、预览、撤销签名...
纯手写简书源码
07-22
Admin AdminPermission AdminRole AdminUser Comment Console Exceptions Fan Http Jobs Model Notice Policies Post PostTopic Providers Topic User Zan
如何手写一个简易的 Vuex
10-14
主要介绍了如何手写一个简易的 Vuex，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
【手写 Vuex 源码】第七篇 - Vuex 的模块安装
BraveWangDev
02-12 428
本篇，主要介绍了 Vuex 模块安装的实现，完成了 action、mutation、getter 的收集和处理，主要涉及以下几个点：1，Vuex 模块安装的逻辑；2，Vuex 代码优化；3，Vuex 模块安装的实现；4，Vuex 初始化流程梳理；
手写vue源码，入门级别
鹿青的博客
08-19 600
最近在跟着教学视频学习vue源码，做了一些总结，希望能对学习vue有所帮助 知识要点 vue工作机制 vue响应式原理 依赖收集与追踪 编译compile 通过实现的入门级源码一步一步实现vue的简单功能指令 Vue响应式原理：defineProperty <div id="app"> <p>你好,<span id="name"></span></p> </div> <script> var o
Vue源码分析-手写Vue（简易版）
m0_57101855的博客
10-05 329
Vue源码分析
手写vue源码(精简版) -- 模版编译，双向数据绑定
huolinianyu的博客
09-02 951
手写mini版的vuevue原理图编译前的知识准备实现编译 vue原理图 编译前的知识准备 节点类型 – nodeType。document可以看成是一棵节点树，它是由一个个的节点组成的。 <p key='index'>text</p //每一个标签都属于元素节点， //包裹在标签里面的是文本节点, //开始标签里面的健值对是属性节点 //所有以上的都统称为节点，这些节点...
前端进阶-手写Vue2.0源码（一）
BigSharkLx的博客
03-04 370
前言 先说一下写此系列的初衷–最近公司招聘高级前端岗位 于是面了很多人 这面着面着就有点 痛心疾首 了 因为我发现很多做了五年以上的同学还是停留在业务逻辑层 一般表现为项目经验丰富 做过一些复杂的业务 但是对于框架或者工具的底层源码实现以及 js 的细节掌握并不到位 就比如 Vue 的混入（mixin） 大家基本都知道用它能解决啥问题 但是混入的原理 混入策略 混入顺序等等这些能全部回答出来的就比较少 于是我决定和大家一起手写一遍Vue2.0版本的源码 学习优秀源码的思路（后续会加入 3.0 版本） 适用.
深入vue2.0源码系列:手写代码模拟vue2.0组件化的实现
前端程序员、项目经理、人工智能博主
03-14 356
在开始之前，我们先来了解一下Vue2.0的组件化开发模式。组件注册：通过Vue.component()方法注册组件，让Vue2.0知道该组件的存在。组件数据：组件内部的数据应该被封装在组件实例内部，避免和其他组件或应用程序的数据冲突。组件模板：组件模板应该被定义在组件实例内部，而不是HTML文件中。组件通信：组件之间的通信应该通过父子组件之间的props和事件来完成。
【手写 Vue2.x 源码】第一篇 - 使用 rollup 构建 Vue 环境
BraveWangDev
01-03 846
第一篇-使用 rollup 构建 Vue 环境：工程初始化、安装依赖、创建入口、配置 Rollup 、构建脚本、Vue 打包构建，vue 使用测试；
javascript 手写一个 vuex
02-09
我不是很清楚这个问题，但是我可以推荐一些可能有用的资源来帮助你学习如何编写 vuex 状态管理器。比如，Vuex 官方文档（https://vuex.vuejs.org/zh/guide/），Vuex 入门教程（https://scrimba.com/g/gvuex），Vuex ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值