简单理解vuex原理

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就能看见。官网也有文档：
以 _ 或开头的property不会被Vue实例代理，因为它们可能和Vue内置的property、API方法冲突。你可以使用例如vm.开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm. 开头的property 不会被Vue实例代理，因为它们可能和Vue内置的property、API方法冲突。你可以使用例如 vm.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实例实现响应式这样的。

简单理解vuex原理相关推荐

一篇文章理解vuex原理
vuex作用: 组件的通信成本很高,所以为了简化组件间通信(共享数据),vue提供了vuex插件.是基于flux思想实现的. flux 是由react团队提供的数据通信架构思想.解决网状通信的问题.实 ...
Vuex原理理解及实现
Vuex是什么? 官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 个人理解:Vu ...
vuex原理解析并实现一个简单的vuex
vuex的作用官方 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 个人理解简 ...
关于Vuex的简单理解和使用
1.什么是Vuex? 在使用vue作为框架的前端项目开发中,我们经常会碰到Vuex,那么Vuex到底是什么东西呢? 根据官方文档给出的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理 ...
C++实现爬虫,深入理解爬虫原理(最详细,最简单的教程)
前言: 我目前主要学习方向是c++,看到网上基本上都是用python写的爬虫,我也试过,确实非常方便,几行代码就能解决,但却就是因为python封装的太好,过于简单,使得很多人包括我最开始的时候,都很 ...
Android：安卓学习笔记之OkHttp原理的简单理解和使用
Android OkHttp使用原理的简单理解和使用 OkHttp 0.前言 1.请求与响应流程 1.1 请求的封装 1.2 请求的发送 1.3 请求的调度 1.4 请求的处理 2.拦截器 2.1 R ...
【vue2.0进阶】轻松理解Vuex的3个核心概念及简单应用案例(计算器)
Vuex是一个提供状态管理机制,相比使用传统的全局对象,它有两大优点,一个是它的状态存储是响应式的,另一个是要不能随意修改Vuex的状态,必须按照它的规矩来办事.最后也了解了它有适用和不适用的业务场景 ...
mDNS 原理的简单理解
转自:http://www.binkery.com/post/318.html mDNS 原理的简单理解 mDNS multicast DNS , 使用5353端口. 在局域网内,你要通过一台主机和其 ...
Mysql的全文索引原理的简单理解
Mysql的全文索引实际是通过倒排索引来实现的. 倒排索引实际就是将要插入的文本按照相应的词进行拆分,然后额外建立一张表,存储这些出现的单词,并做出相应的统计. 创建一张表: CREATE TAB ...

简单理解vuex原理

简单理解vuex原理相关推荐

最新文章

热门文章