vuex 原始碼分析 vuex原始碼解讀 簡易實現

原始碼解讀

開始之前，先貼個大綱：

首先，我們從使用方法入手，一步步來看

// store.js

import vue from 'vue';

import vuex from 'vuex';

vue.use(vuex);

export default new vuex.store(, data) , 2000)

// main.js

import vue from 'vue';

import store from './store';

new vue(}

msgplus: }

export default );

} else else if (options.parent && options.parent.$store) )

首先貼出store方法的定義：

var store = function store (options) ;

if (!vue && typeof window !== 'undefined' && window.vue) );

var usedevtools = options.devtools !== undefined ? options.devtools : vue.config.devtools;

if (usedevtools) ;

// reset local getters cache

store._makelocalgetterscache = object.create(null);

// 將getters的方法包裝一層後，收集到computed物件中 -- mynote

// 使用object.defineproperty註冊store.getters，使得每次取值時，從store._vm中取。原因是下方進行new vue傳入computed後，computed的值會放到例項上邊 -- mynote

var computed = {};

computed[key] = partial(fn, store);

object.defineproperty(store.getters, key, ,

enumerable: true // for local getters

var silent = vue.config.silent;

vue.config.silent = true;

// 將state值 和 getters值分別傳入乙個new vue中初始化成data和computed，使其具有響應式特性 -- mynote

store._vm = new vue(;

var entry = this._mutations[type];

if (!entry) );

if (

process.env.node_env !== 'production' &&

options && options.silent

console.warn(

"[vuex] mutation type: " + type + ". silent option has been removed. " +

'use the filter functionality in the vue-devtools'

簡易實現

// src下，新建vuex.js檔案，之前引入vuex的地方改為引用此檔案，其他地方無需修改

let vue;

class store

this.state = this.vm.state;

this.mutations = options.mutations;

this.actions = options.actions;

commit (eventname, data) else {

this.$store = this.$parent && this.$parent.$store;

export default {

store,

install

完整專案可參考。

趁著空閒，記錄下學習的知識，有待進一步完善...

Vuex的原始碼分析

mapstate import from vuex export default 經過 mapstate 函式呼叫後的結果，如下所示 import from vuex export default countalias countpluslocalstate 再看一下 mapstate 引數為陣列的...

Vuex原始碼分析（二） state

首先總結 const store newvuex.store 這個state可以是乙個物件，也可以是乙個方法 modules vm.store.state 這裡的state已經不像原始options那樣很多層級了，那麼store的內部結構如何？又是如何簡化state結構的呢？由於原始碼中存在很多非s...

vuex原始碼實現

let vue 自定義foreach迴圈 author suzhe datetime 2019 07 28t11 12 17 0800 param obj description param classback description const foreach obj,classback 格式化模...