经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML5 » 查看文章
vuex 源码分析(一) 使用方法和代码结构
来源：cnblogs　　作者：大沙漠　　时间：2019/9/10 10:53:54　　对本文有异议

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，注意:使用前需要先加载vue文件才可以使用(在node.js下需要使用Vue.use(Vuex)来安装vuex插件，在浏览器环境下直接加载即可,vuex会自行安装)

vuex的使用方法很简单，首先调用new Vuex.Store(options)创建一个store实例即可，然后在创建vue实例时把这个store实例作为store属性传入即可，调用new Vuex.Store(options)创建一个vuex实例时可以传入如下参数:

    state        　　　　存储的数据                
    getters        　　　可以认为是store的计算属性
    mutations    　　   这是更改Vuex的store里的数据的唯一方法，只能是同步方法(官网这样写的，其实不赞同这个说法，具体请看下面)
    actions                  可以包含一些异步操作，它提交的是mutation，而不是直接变更状态。
    modules                为了更方便的管理仓库，我们把一个大的store拆成一些modules(子仓库),整个modules是一个树型结构
    strict       　　       是否开启严格模式,无论何时发生了状态变更且不是由mutation函数引起的，将会抛出错误，这能保证所有的状态变更都能被调试工具跟踪到。    ;默认为false
后面介绍每个api时单独介绍用法，举个栗子，如下:

 writer by:大沙漠 QQ:22969969

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  7.     <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <p>{{message}}</p>
  12.         <p>{{reverseMessage}}</p>
  13.         <p>{{no}}</p>
  14.         <button @click="test1">mutation测试</button>
  15.         <button @click="test2">action测试</button>
  16.     </div>
  17.     <script>
  18.         const store = new Vuex.Store({
  19.             state:{message:'Hello World',no:123},                   
  20.             getters:{                                   //getters类似于Vue的计算属性
  21.                 reverseMessage:state=>{return state.message.split('').reverse().join('')},
  22.                 increment:state=>{state.no++}
  23.             },
  24.             mutations:{                                 //mutation包含一些同步操作
  25.                 increment(state,payload){state.no+=payload.no}
  26.             },
  27.             actions:{                                   //actions包含一些异步操作
  28.                 increment({commit},info){
  29.                     setTimeout(function(){
  30.                         commit('increment',info)
  31.                     },500)
  32.                 }
  33.             }
  34.         })
  36.         var app = new Vue({
  37.             el:"#app",
  38.             store,
  39.             computed:{
  40.                 no:function(){return this.$store.state.no},
  41.                 message:function(){return this.$store.state.message},
  42.                 reverseMessage:function(){return this.$store.getters.reverseMessage}
  43.             },
  44.             methods:{
  45.                 test1:function(){this.$store.commit('increment',{no:10})},
  46.                 test2:function(){this.$store.dispatch('increment',{no:10})}
  47.             }
  48.         })
  49.     </script>
  50. </body>
  51. </html>

渲染如下:

我们点击mutation测试这个按钮123会这个数字会立马递增10，而点击action测试这个按钮，数字会延迟0.5秒，再递增10，前者是mutation对应的同步操作，而后者是action对应的异步操作

如果只是这样显式数据，感觉vuex没有什么用处，我们在浏览器里输入store.state.message="Hello Vue"来直接修改state里的数据看看怎么样，如下:

修改后页面里的内容立即就变化了，如下:

是不是很神奇，这里只是一个组件引用了vuex，如果很多的组件都引用了同一个vuex实例，那么只要状态发生变化，对应的组件都会自动更新，这就是vuex的作用。

vuex官网说mutations是更改store里数据的唯一方法，这在逻辑上不严谨的，只有设置了strict为true,那么说mutations是更改store里数据的唯一方法还可以接收，比如我们在控制台里直接修改store里的数据了，也没报错啥的。

vuex内部的实现原理很简单，就是定义一个vue实例，把vuex.store里的state作为data属性(不是根data，而是放到$$state这个属性里，不过由于值是个对象，因此也是响应式的)，getters作为计算属性来实现的

 

源码分析

我们先看看vuex插件导出了哪些符号，打开vuex的源文件，拉到最底部，如下:

  1.   var index = {
  2.     Store: Store,                           //初始化
  3.     install: install,                       //安装方法
  4.     version: '3.1.0',                       //版本号
  5.     mapState: mapState,                     //State辅助函数
  6.     mapMutations: mapMutations,             //Mutations辅助函数
  7.     mapGetters: mapGetters,                 //Getters辅助函数
  8.     mapActions: mapActions,                 //Actions辅助函数
  9.     createNamespacedHelpers: createNamespacedHelpers
  10.   };

可以看到Store就是初始化函数，install是安装用的，version是版本号，其它几个都是辅助函数，最后一个是和辅助函数的上下文绑定(也就是命名空间)相关，一般用不到。

我们先看看安装流程,如下:

  1.   function install (_Vue) {         //安装Vuex
  2.     if (Vue && _Vue === Vue) {        //如果Veue存在且等于参数_Vue，表示已经安装过了,则报错
  3.       {
  4.         console.error(
  5.           '[vuex] already installed. Vue.use(Vuex) should be called only once.'
  6.         );
  7.       }
  8.       return
  9.     }
  10.     Vue = _Vue;                       //将_Vue保存到局部变量Vue里   
  11.     applyMixin(Vue);                  //调用applyMixin()进行初始化
  12.   }

安装时最后会执行applyMixin函数，该函数如下:

  1.   function applyMixin (Vue) {                         //将Vuex混入到Vue里面
  2.     var version = Number(Vue.version.split('.')[0]);      //获取主版本号
  4.     if (version >= 2) {                                   //如果是Vue2.0及以上版
  5.       Vue.mixin({ beforeCreate: vuexInit });                  //则执行Vue.mixin()方法，植入一个beforeCreate回调函数
  6.     } else {
  7.       // override init and inject vuex init procedure
  8.       // for 1.x backwards compatibility.
  9.       var _init = Vue.prototype._init;
  10.       Vue.prototype._init = function (options) {
  11.         if ( options === void 0 ) options = {};
  13.         options.init = options.init
  14.           ? [vuexInit].concat(options.init)
  15.           : vuexInit;
  16.         _init.call(this, options);
  17.       };
  18.     }
  20.     /**
  21.      * Vuex init hook, injected into each instances init hooks list.
  22.      */
  24.     function vuexInit () {                                //Vuex的安装方法  
  25.       var options = this.$options;
  26.       // store injection
  27.       if (options.store) {                                    //如果options.store存在，即初始化Vue实例时传入了store实例
  28.         this.$store = typeof options.store === 'function'         //则将store保存到大Vue的$store属性上,如果store是个函数，则执行该函数
  29.           ? options.store()
  30.           : options.store;
  31.       } else if (options.parent && options.parent.$store) {   //如果options.store不存在，但是父实例存在$store(组件的情况下)
  32.         this.$store = options.parent.$store;                      //则设置this.$store为父实例的$store
  33.       }
  34.     }
  35.   }

这样不管是根vue实例，还是组件，都可以通过this.$store来获取到对应的$store实例了，安装就是这样子，下面说一下整体流程

以上面的例子为例，当我们执行new Vuex.Store()创建一个Vuex.Store的实例时会执行到导出符号的Store函数，如下:

  1.   var Store = function Store (options) {                  //构造函数
  2.     var this$1 = this;
  3.     if ( options === void 0 ) options = {};
  5.     // Auto install if it is not done yet and `window` has `Vue`.
  6.     // To allow users to avoid auto-installation in some cases,
  7.     // this code should be placed here. See #731
  8.     if (!Vue && typeof window !== 'undefined' && window.Vue) {      //如果局部变量Vue不存在且window.Vue存在，即已经引用了Vue,而且window.Vue不存在(还没安装)
  9.       install(window.Vue);                                              //执行install()方法进行安装     ;从这里看出在浏览器环境下不需要执行Vue.use(vuex),在执行new Vuex.Store()会自己安装
  10.     }
  12.     {
  13.       assert(Vue, "must call Vue.use(Vuex) before creating a store instance.");
  14.       assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.");
  15.       assert(this instanceof Store, "store must be called with the new operator.");
  16.     }
  18.     var plugins = options.plugins; if ( plugins === void 0 ) plugins = [];
  19.     var strict = options.strict; if ( strict === void 0 ) strict = false;
  21.     // store internal state
  22.     this._committing = false;
  23.     this._actions = Object.create(null);
  24.     this._actionSubscribers = [];
  25.     this._mutations = Object.create(null);
  26.     this._wrappedGetters = Object.create(null);
  27.     this._modules = new ModuleCollection(options);                    //初始化modules,ModuleCollection对象是收集所有模块信息的
  28.     this._modulesNamespaceMap = Object.create(null);
  29.     this._subscribers = [];
  30.     this._watcherVM = new Vue();
  32.     // bind commit and dispatch to self
  33.     var store = this;
  34.     var ref = this;
  35.     var dispatch = ref.dispatch;
  36.     var commit = ref.commit;
  37.     this.dispatch = function boundDispatch (type, payload) {          //重写dispatch方法，将上下文设置为当前的this实例
  38.       return dispatch.call(store, type, payload)
  39.     };
  40.     this.commit = function boundCommit (type, payload, options) {     //重写commit方法，将上下文设置为当前的this实例
  41.       return commit.call(store, type, payload, options)
  42.     };
  44.     // strict mode
  45.     this.strict = strict;
  46.   
  47.     var state = this._modules.root.state;                             //获取根仓库的state信息
  49.     // init root module.
  50.     // this also recursively registers all sub-modules
  51.     // and collects all module getters inside this._wrappedGetters
  52.     installModule(this, state, [], this._modules.root);               //安装根模块，该函数会递归调用的安装子模块，并收集它们的getters到this._wrappendGetters属性上
  54.     // initialize the store vm, which is responsible for the reactivity
  55.     // (also registers _wrappedGetters as computed properties)
  56.     resetStoreVM(this, state);                                        //安装vm，也就是这里会创建一个vue实例，并把state、getter作为响应式对象
  58.     // apply plugins
  59.     plugins.forEach(function (plugin) { return plugin(this$1); });    //安装插件
  61.     var useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools;
  62.     if (useDevtools) {
  63.       devtoolPlugin(this);
  64.     }
  65.   };

ModuleCollection模块会收集根模块和子模块的的所有信息，例子里执行到这里时对应的this._modules如下:

然后会调用执行到installModule()会安装每个模块，也就是把每个模块的getters、mutations、actions进行一系列处理,如果还有子模块(module属性)则递归调用installModule依次处理每个子模块，如下:

  1. function installModule (store, rootState, path, module, hot) {      //安装模块 
  2.     var isRoot = !path.length;                                          //当前是否为根Module
  3.     var namespace = store._modules.getNamespace(path);                  //获取命名空间
  5.     // register in namespace map
  6.     if (module.namespaced) {
  7.       store._modulesNamespaceMap[namespace] = module;
  8.     }
  10.     // set state  
  11.     if (!isRoot && !hot) {                                             
  12.       var parentState = getNestedState(rootState, path.slice(0, -1)); 
  13.       var moduleName = path[path.length - 1];                          
  14.       store._withCommit(function () { 
  15.         Vue.set(parentState, moduleName, module.state);
  16.       });
  17.     }
  19.     var local = module.context = makeLocalContext(store, namespace, path);
  21.     module.forEachMutation(function (mutation, key) {                     //遍历module模块的mutations对象
  22.       var namespacedType = namespace + key;
  23.       registerMutation(store, namespacedType, mutation, local);             //调用registerMutation注册mutation
  24.     });
  26.     module.forEachAction(function (action, key) {                         //遍历module模块的actions对象
  27.       var type = action.root ? key : namespace + key; 
  28.       var handler = action.handler || action;
  29.       registerAction(store, type, handler, local);                          //调用registerAction注册action
  30.     });
  32.     module.forEachGetter(function (getter, key) {                         //遍历module模块的getter对象
  33.       var namespacedType = namespace + key;
  34.       registerGetter(store, namespacedType, getter, local);                 //调用registerGetter注册getter
  35.     });
  37.     module.forEachChild(function (child, key) {                           //如果有定义了module(存在子模块的情况)
  38.       installModule(store, rootState, path.concat(key), child, hot);        //则递归调用installModule
  39.     });
  40.   }

最后会执行resetStoreVM()函数,该函数内部会创建一个vue实例，这样state和getters就是响应式数据了，如下:

  1.   function resetStoreVM (store, state, hot) {         //重新存储数据
  2.     var oldVm = store._vm;
  4.     // bind store public getters
  5.     store.getters = {};
  6.     var wrappedGetters = store._wrappedGetters;               //获取store的所有getter数组信息
  7.     var computed = {};
  8.     forEachValue(wrappedGetters, function (fn, key) {         //遍历wrappedGetters
  9.       // use computed to leverage its lazy-caching mechanism
  10.       computed[key] = function () { return fn(store); };        //将getter保存到computed里面
  11.       Object.defineProperty(store.getters, key, {
  12.         get: function () { return store._vm[key]; },
  13.         enumerable: true // for local getters
  14.       });
  15.     });
  17.     // use a Vue instance to store the state tree
  18.     // suppress warnings just in case the user has added
  19.     // some funky global mixins
  20.     var silent = Vue.config.silent;                           //保存Vue.config.silent的配置
  21.     Vue.config.silent = true;                                 //设置Vue.config.silent配置属性为true(先关闭警告)
  22.     store._vm = new Vue({                                     //创建new Vue()实例把$$state和computed变成响应式的
  23.       data: {
  24.         $$state: state
  25.       },
  26.       computed: computed
  27.     });
  28.     Vue.config.silent = silent;                               //将Vue.config.silent复原回去
  30.     // enable strict mode for new vm
  31.     if (store.strict) {
  32.       enableStrictMode(store);
  33.     }
  35.     if (oldVm) {
  36.       if (hot) {
  37.         // dispatch changes in all subscribed watchers
  38.         // to force getter re-evaluation for hot reloading.
  39.         store._withCommit(function () {
  40.           oldVm._data.$$state = null;
  41.         });
  42.       }
  43.       Vue.nextTick(function () { return oldVm.$destroy(); });
  44.     }
  45.   }

这样整个流程就跑完了，就是内部创建一个vue实例，利用vue的响应式做数据动态响应。

原文链接：http://www.cnblogs.com/greatdesert/p/11431007.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号