• Vuex 源码学习(一)


    (一)Vuex 是什么?

      Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,

      并以相应的规则保证状态以一种可预测的方式发生变化。 —— 来自 Vuex 官方文档的介绍

      可以这样理解: 整个Vue程序中,将所有的状态和其管理全部集中在一个单例 Store树中,

                      所有的逐渐都可以通过 Store 树来访问状态。

      React 也有专门的 Redux,也是依照 FaceBook 提出的Flux  ”单向数据流“理念。

      Action ==》 dispatch===》Store====》 View

    Vuex 状态管理的核心是:

      (1)所有的数据更改都必须通过 mutaions 提交;

      (2)store.commit() 来调用,或者在全局注入 store 之后,在任何地方都可以吃通过 this.$store.commit() 来定义提交方法;

      (3)action 参与异步状态管理;

      (4)getter 可以在既有的状态基础上派生出新的状态。

    (二)源码解读

            Vuex 源码加注释 <1千行。

      1、整体结构:

      ,Vuex 对外暴露的API 如下图:

      

        2、Store 的 基本用法

      构建使用 Vuex.Store方法如下:

    
    
    var store = new Vuex.Store({
    modules: {
    acceptStore,
    applyStore
    }, // 数据状态模块
    strict:false, // 是否使用严格模式
    plugins:[] // 插件
    });

          由于 Vuex 是多模块状态数据集中管理,对modules的处理便是重中之重。

       一个Store模块本质上返回的便是一个对象,这个对象中包含了如下属性:

       

            namespaced: 是否启用命名空间的模块模式,

       state当前Store模块全部的数据集

          mutations:类似于事件,提交mutation是更改store状态的唯一方法,且必须是同步函数

       actions: 提交状态数据至mutation,可以包含任意异步操作,通过store.commit 分发

       getters:store的计算属性,根据依赖项被缓存起来,当依赖项发生改变,则重新计算

      3、Store的初始化

        Vuex源码是采用ES6语法书写的,如下:

          

       很明显可以看出,在 class  Store  的构造函数 constructor() 中,就是对 Store 的初始化。

       12 行----  constructor( options = { } ) 传入了 默认参数,一个空对象。

        因为 Vuex 是基于 Vue 的, 判断 Vue.js 是否被引入 以及 Vuex 中的 Vue 是否被成功初始化,

        否则 对当前模块中 Vue 进行初始化。

        

        如果当前 Vuex.version>=2,则在 Vue 生命周期  “beforeCreate” 阶段时, 执行 vuexInit()。

        const options = this.$options ,这里的 this 是 Vue 组件实例。

        if(options.store) {  ...}  ,由此可见,在 Vue 实例化时,参数 store 名称不可更改。

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

       如果 并且 给 Vue 组件 新增一个属性 store 。

      这也是为什么,我们可以在 Vue 组件中,使用   this.$store.commit('acceptStore/SET_MENU_LIST',val) 的原因。

        

  • 相关阅读:
    JS-BOM操作-Location、history、常用弹窗、屏幕属性
    JS的基础DOM操作-选取父子级元素、动态生成元素、修改元素、Classlist
    setup
    循环请求接口,统一处理
    多个url文件下载
    扁平数据结构转Tree
    es6 解构赋值
    watch与computed与props
    v-model与.sync组件通信
    v-on="$listeners"和v-bind="$attrs"
  • 原文地址:https://www.cnblogs.com/xianrongbin/p/2775392.html
Copyright © 2020-2023  润新知