null - 程序员宅基地

简单理解vuex原理_vuestore 构造函数-程序员宅基地

vuex在用 vue一年之后就不怎么用了，搭建项目会预留，但是几乎不用了。之前也说过vuex使用场景，vue是单项数据流，所以多组件直接共享状态的时候可以使用，另外就是做一些缓存，减少请求。

只是刷新就会初始化的问题，配合本地存储，所以很多使用vuex和本地缓存，总觉得有点矛盾，甚至有些场景用本地缓存之后就不需要vuex了。除非这个数据是需要响应式的。虽然不怎么用，简单了解一下核心原理还是需要的。

Vue.use(Vuex)
new Vuex.Store({})

所以暴露出去两个方法，install(vue.use会调用install)和Store方法，且vuex是个类或者构造函数：

let Vue;
export class Store {
constructor(options){}}
export const install = (_Vue) =>{
    Vue = _Vue;
applyMixin(Vue);
}

看vuex源码，调用了applyMixin方法，然后执行Vue.mixin({ beforeCreate: vuexInit });通过mixin方法获取实例。所以执行vuexInit的时候就能通过this获取实例是否有store属性(new Vue的时候把store传入)，有就给vue实例添加$store：

function vuexInit () {
  var options = this.$options;
  if (options.store) {
    this.$store = typeof options.store === 'function'
      ? options.store()
      : options.store;
  } else if (options.parent && options.parent.$store) {
    this.$store = options.parent.$store;
  }
}
this.$store = options.parent.$store;主要是给组件加$store，当前组件的this上面没有，父组件有，就把父组件的给当前组件也添加$store。

最核心的部分就是通过产生一个单独的vue实例实现vuex的响应式：

this._vm = new Vue({
    data:{
        $$state:state,
    }
});

源码是store._vm，代码里面搜索new Vue就能看见。官网也有文档：
以 _ 或 $开头的 p r o p e r t y 不会被 V u e 实例代理，因为它们可能和 V u e 内置的 p r o p e r t y 、 A P I 方法冲突。你可以使用例如 v m .$ data._property 的方式访问这些 property（官网学习/api/data里面有介绍）。但其实我不明白为什么要两个$。

实现getter、mutations、actions就比较简单了：

this.mutations = {};
forEachValue(options.mutations, (fn, key) => {
    this.mutations[key] = (payload) => fn.call(this, this.state, payload)
});

差不多就是发布订阅，把所有的方法都放到一个对象里面，只是getter还加了computed做缓存。

然后我们调用commit的时候调用mutations：

commit = (type, payload) => {
    this.mutations[type](payload);
}

actions也差不多。

今天主要是知道vuex是通过mixin判断vue实例是否有store，然后挂载$store，通过单独创建一个vue实例实现响应式，mutations和actions用发布订阅的方法实现。至于模块就不说了，看了有些复杂。

辅助函数也还好，就是返回一个函数，然后函数里面调用this.$store.emit:

const mapMutations = (mutationList) => {
    let res = {};
    for (let i = 0; i < mutationList.length; i++) {
        let name = mutationList[i]
        res[name] = function(payload){
            this.$store.commit(name,payload);
        }
    }
    return res
}

这跟函数切片编程一样，这边只是简写了。

其实突然发现，最近分享源码的都只能自己看懂，别人应该都看不懂，只是里面有一些可以稍微提取一下，比如通过单独创建一个vue实例实现响应式这样的。

本文链接：https://blog.csdn.net/wade3po/article/details/108584336

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

vue引入原生高德地图_前端引入原生地图-程序员宅基地

文章浏览阅读556次，点赞2次，收藏3次。由于工作上的需要，今天捣鼓了半天高德地图。如果定制化开发需求不太高的话，可以用vue-amap，这个我就不多说了，详细就看官网 https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install然而我们公司需要英文版的高德，我看vue-amap中好像没有这方面的配置，而且还有一些其他的定制化开发需求，然后就只用原生的高德。其实原生的引入也不复杂，但是有几个坑要填一下。1. index.html注意，引入的高德js一定要放在头部而_前端引入原生地图

ViewGroup重写大法（一）-程序员宅基地

文章浏览阅读104次。本文介绍ViewGroup重写，我们所熟知的LinearLayout，RelativeLayout，FrameLayout等等，所有的容器类都是ViewGroup的子类，ViewGroup又继承View。我们在熟练应用这些现成的系统布局的时候可能有时候就不能满足我们自己的需求了，这是我们就要自己重写一个容器来实现效果。ViewGroup重写可以达到各种效果，下面写一个简单的重写一个Vi..._viewgroup 重写

Stm32学习笔记，3万字超详细_stm32笔记-程序员宅基地

文章浏览阅读1.8w次，点赞279次，收藏1.5k次。本文章主要记录本人在学习stm32过程中的笔记，也插入了不少的例程代码，方便到时候CV。绝大多数内容为本人手写，小部分来自stm32官方的中文参考手册以及网上其他文章；代码部分大多来自江科大和正点原子的例程，注释是我自己添加；配图来自江科大/正点原子/中文参考手册。笔记内容都是平时自己一点点添加，不知不觉都已经这么长了。其实每一个标题其实都可以发一篇，但是这样搞太琐碎了，所以还是就这样吧。_stm32笔记

CTS(13)---CTS 测试之Media相关测试failed 小结（一）_mediacodec框架 cts-程序员宅基地

文章浏览阅读1.8k次。Android o CTS 测试之Media相关测试failed 小结（一）CTSCTS 即兼容性测试套件，CTS 在桌面设备上运行，并直接在连接的设备或模拟器上执行测试用例。CTS 是一套单元测试，旨在集成到工程师构建设备的日常工作流程（例如通过连续构建系统）中。其目的是尽早发现不兼容性，并确保软件在整个开发过程中保持兼容性。CTS 是一个自动化测试工具，其中包括两个主要软件组件：CTS tra..._mediacodec框架 cts

chosen.js插件使用，回显，动态添加选项-程序员宅基地

文章浏览阅读4.5k次。官网：https://harvesthq.github.io/chosen/实例化$(".chosen-select").chosen({disable_search_threshold: 10});赋值var optValue = $(".chosen-select").val();回显1.设置回显的值$(".chosen-select").val(“opt1”);2.触发cho..._chosen.js

C++ uint8_t数据串如何按位写入_unit8_t 集合赋值 c++-程序员宅基地

文章浏览阅读1.9k次。撸码不易，网上找不到，索性自己写，且撸且珍惜！void bitsWrite(uint8_t* buff, int pos, int size, uint32_t value){ uint32_t index[] = { 0x80000000, 0x40000000, 0x20000000, 0x10000000, 0x8000000, 0x4000000, 0x2000000, 0x1000000, 0x800000, 0x400000, 0_unit8_t 集合赋值 c++

随便推点

Javaweb框架思维导图_javaweb框架图-程序员宅基地

文章浏览阅读748次。javaweb知识点_javaweb框架图

adb的升级与版本更新_adb iptabls怎么升级-程序员宅基地

文章浏览阅读1.1w次，点赞3次，收藏16次。adb是没有自动升级的命令的，如果想要更新adb的版本，我们可以在网上找到自己想要的版本进行更新给大家提供几个版本https://pan.baidu.com/s/1yd0dsmWn5CK08MlyuubR7g&shfl=shareset 提取码: 94z81、下载解压后我们可以找到下面几个文件，并复制2、找到adb安装的文件夹下的platform-tools文件夹，我这里是..._adb iptabls怎么升级

微信苹果版删除所有的聊天记录的图文教程_mac微信怎么删除聊天列表-程序员宅基地

文章浏览阅读3.8k次。很多用户可能都知道怎么在Windows系统上删除微信的聊天记录，那么苹果电脑上的微信软件怎么删除所有的聊天记录呢？下面小编就专门来给大家讲下微信mac版删除所有的聊天记录的图文教程。点击后会弹出提示窗口，点击这里的确认按钮就可以将其清理掉了。在这里选择要清理的数据，然后点击下方右边的清理按钮就行了。在mac上打开微信后，点击左下角的横线图标。然后再点击这里的管理微信聊天数据按钮。打开了设置窗口，点击上方的“通用”。在这里点击下方的前往清理按钮。点击弹出菜单里的“设置”。_mac微信怎么删除聊天列表

【报错笔记】数据类型转换时报错：Request processing failed；nested exception is java.lang.NumberFormatException:..._request processing failed; nested exception is jav-程序员宅基地

文章浏览阅读7.7k次。数据类型转换时报错：Request processing failed;nested exception is java.lang.NumberFormatException:For input String “20151512345”报错原因：数字格式异常，接着后面有 For input string: “201515612343” 提示，这就告诉我们你当前想把 “201515612343” 转换成数字类型时出错了。解决方案：使用2015151612343这个数字太大了，所以直接使用string_request processing failed; nested exception is java.lang.numberformatexcepti

qml 自定义消息框_Qt qml 自定义消息提示框-程序员宅基地

文章浏览阅读387次。版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/a844651990/article/details/78376767Qt qml 自定义消息提示框QtQuick有提供比较传统的信息提示框MessageDialog，但是实际开发过程并不太能满足我们的需求。下面是根据controls2模块中..._qml 自定义 messagedialog

Redis.conf 默认出厂内容_默认出厂的原始redis.conf文件全部内容-程序员宅基地

文章浏览阅读599次。# Redis configuration file example.## Note that in order to read the configuration file, Redis must be# started with the file path as first argument:## ./redis-server /path/to/redis.conf # Note on units: when memory size is needed, it is pos._默认出厂的原始redis.conf文件全部内容