鲜荣彬
Herry

(一)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) 的原因。

 

    

posted on 2017-12-14 20:38  Herry彬  阅读(344)  评论(0编辑  收藏  举报