Vuex使用指南及原理简介

最新推荐文章于 2024-09-20 22:35:21 发布

夕山雨

最新推荐文章于 2024-09-20 22:35:21 发布

阅读量1.2k

点赞数 6

分类专栏： vue 文章标签： Vuex

本文链接：https://blog.csdn.net/qq_41694291/article/details/106313710

版权

vue 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

一、Vuex用法指南

1. Vue和Vuex的关系

Vuex是专为vue设计的状态管理框架，类似（并且借鉴自）React的Flux。

我们知道，Vue的设计借鉴了MVVM（Model-View-ViewModel）的思想，也就是由业务数据驱动视图渲染。它使用template来定义视图模板，用data来管理业务数据。通过将data中的数据绑定到模板，并对data的值进行监听，来自动渲染和更新视图。比如下面的组件：
ArticleTitle.vue

<template>
    <h1>{{title}}</h1>
</template>

<script>
    data () {
        return {
            title: 'Vuex指南'
        }
    }
</script>

这个组件所使用的模板由template定义，模板内通过{{ title }}插值语法，将业务数据data中的变量title绑定进来。首绘时页面会渲染title的初始值：'Vuex指南'，以后任何时候只要修改title的值，视图都会依据新的值重新渲染。

业务数据可以跨组件传递，但是只能从上级组件向下级组件传递，不能逆向或跨兄弟组件（泛指没有嵌套关系的组件）传递。如果子组件需要修改父组件中的数据，需要向父组件触发update事件来更新，不允许直接修改。

那么问题就来了：假如有一组业务数据，它在多个组件的视图中会用到，并且这些组件没有直接的嵌套关系，那么该在哪保存和管理这个数据，才能保持所有组件的引用是同步的呢？

Vue给出的官方解决方案是，使用Vuex将这组数据作为公共数据提取出来，单独维护。所有组件都直接与这组公共数据交互，从而保证组件状态的同步。

为了对这组公共数据进行规范管理，Vuex定义了五个重要概念：state、getters、mutations、actions和modules。

state的含义是“状态”。在计算机学科中，用于描述某个实体运行规则的数学模型被称为“状态机”，状态机的某个特定的状态被称为state。在这里，对共享数据的管理逻辑可以抽象为一个状态机，state描述的就是它管理的这组共享变量，从state中你可以知道被管理的变量在当前状态下的值。
getters是Vuex版本的计算属性。
mutations是Vuex提供的修改state中变量值的唯一方法。
actions是封装数据处理逻辑的一般方法，常用来封装异步操作。
modules是Vuex的模块拆分方案，用于解决由变量过多导致的难以维护的问题。

Vuex最简单的用法如下：
main.js

import Vue from 'vue';
import Vuex from 'vuex';
import App from './App.vue';

Vue.use(Vuex);

const store = Vuex.store({
  state: { name: 'carter' },
  mutations: { 
    setName: (state, name) => {
      state.name = name;
    }
  }
})

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

现在在整个vue应用的任何一个组件内，我们都可以通过this.$store访问到这个全局store，包括从state中取值，或通过mutations提交修改等（这里的逻辑比较简单，因此我们没有定义getters、actions和modules等属性）。如：
App.vue

<template>
  <h1>{{name}}</h1>
</template>

<script>
  data(){return {};},
  computed: {
    name: this.$store.state.name;
  }
</script>

通过当前组件对象this上的$store属性，即可访问到全局store，它提供了state、getters、mutations、actions等属性。

下面我们分别详细介绍这五个概念。

2. 核心概念介绍

(1). state

如果与Vue的概念进行类比，Vuex中的state可以理解为Vue的data，即业务数据。但是Vuex的定位是状态管理，它不负责任何View（视图层）和ViewModel（绑定层）的逻辑，仅仅用于维护共享变量的状态，因此它沿用了状态机中的概念，用state来访问变量。

由于Vuex是依赖Vue的状态管理框架，因此它的状态也是响应式的。等价的，它与Vue有着同样的约束，如不能直接通过索引修改数组某项的值，为对象新增的属性不是响应式的等。相应的解决方案与Vue也是一致的，这里不再赘述。

关于state，最重要的是要记住它维护的变量值永远只能通过mutations来修改，这是为了保证数据变化的可追踪（关于Vuex如何追踪数据变化，后面的原理部分会结合部分源码介绍），提高数据的可维护性。

在组件中引用state，可以通过this.$store.state，一般我们会将其映射到一个计算属性，如：

...
computed: {
  name() {
    return this.$store.state.name;
  }
}
...

也可以不映射到计算属性，而是在组件的任意地方直接访问这个值（在模板中使用时不需要this），如：

<template>
  <h1>{{ $store.state.name }}</h1>
</template>
...
methods: {
  getName(){
    return this.$store.state.name;
  }
}

如果需要将state的多个值分别映射到组件的计算属性，一个个像上面那样写未免过于麻烦。为此Vuex提供了一个辅助函数mapState，可以帮助你少写一些代码：

import { mapState } from 'vuex';
export default {
  // ...
  computed: mapState({
    count: state => state.count,
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

注意，只有使用常规函数，才能访问当前组件对象this，箭头函数内部是没有定义this的。如果不需要为变量改名，mapState也可以接受一个字符串数组：

...
computed: mapState(['count', 'name']),
...

这样你就把state中的变量count和name映射成了当前组件的同名计算属性count和name。于是你可以在模板中这样方便地绑定它的值：

<template>
  <h1>{{ count }}</h1>
</template>

使用es6的展开符可以组合state中的变量和常规计算属性：

computed: {
  ...mapState(['count', 'name']),
  menuLength() {
    return this.menus.length;
  }
}

由于组件中不允许直接修改state中变量的值，只能用于取值，所以它和计算属性一样，是“只读”（狭义上的只读，指不允许直接进行写操作）的。又因为state和计算属性一样都是响应式的，因此我们才常把state中的变量映射到组件的计算属性。

不过state中的变量并不是真正意义上的“只读”，它可以通过提交mutation来修改，后面介绍mutation时会介绍。

(2). getters

getters之于Vuex，就如computed之于Vue，用于定义较为复杂的取值逻辑。

现在假设我们在state中有一个菜单数组menus，它的每一项带一个root属性，标识当前菜单是否为根节点：

state: {
  menus: [
    { id: '1', ..., root: true }
    { id: '2', ..., root: true }
    { id: '11', ..., root: false }
    ...
  ]
}

假如我们需要在很多个组件中用到由根节点组成的菜单数组，常规的思路是在组件中定义一个计算属性，或者定义一个函数来过滤根节点，如：

computed: {
  rootMenu() {
    return this.$store.state.menus.filter((menu) => {
      return menu.root;
    })
  }
}
// 或
methods: {
  getRootMenu(){
    return this.$store.state.menus.filter((menu) => {
      return menu.root;
    })
  }
}

由于计算属性可以基于依赖对结果进行缓存，因此第一种实现的性能高于定义函数。但如果有许多组件都依赖这个值，并且实际的取值复杂度原高于这里呢？你需要在每个组件都重写这个复杂的取值逻辑！

或者你为了方便，直接把根菜单数组保存在store里（假设是rootMenu）。但这是不可取的，因为假如menus发生变化，rootMenu的值就可能受影响，所以你必须在维护menus的值时，同时去维护rootMenu，这就显著增加了mutations逻辑的复杂性，以及系统出bug的概率。

Vue中为了解决这个问题，提出了computed，对计算结果进行缓存，Vuex则提出了getters。

我们可以用getters这样定义rootMenu：

state: { menus: [...] },
getters: {
  rootMenu(state) {
    return state.menus.filter((menu) => {
      return menu.root;
    })
  }
}

在组件中使用getters很简单：

computed: {
  rootMenu() {
    return this.$store.getters.rootMenu;
  }
}

或者像state一样，用辅助函数mapGetters快速映射到组件的计算属性：

import { mapGetters } from 'vuex';
// ...
computed: {
  ...mapGetters(['rootMenu'])
}

现在在组件中，我们直接使用getters中的rootMenu即可，不需要重新封装处理逻辑。最重要的是，它和computed一样，可以对计算结果缓存，并且会在所依赖的变量变化时自动更新。

有人可能会好奇，为什么getters中的命名使用的是名词，而不是诸如getRootMenu这样的命名法呢？

其实这和Vue的computed是一个道理。在Vuex中，getters是作为state变量的计算属性存在的，也就是说，getters的每一项被Vuex视为一个变量（从表面上看它虽然是函数，但那只是为了封装计算过程，它在逻辑上被视为变量），只是它的值依赖于state中其他变量的值。

getters可以接受store的getters属性作为第二个参数，通过它可以访问其他getters，这样可以组合出更加复杂的取值逻辑：

getters: {
  rootMenuLength(state, getters){
    return getters.rootMenu.length;
  },
  rootMenu(state) {
    return state.menus.filter((menu) => {
      return menu.root;
    })
  }
}

另外，getters也是可以接受参数的，不过此时的getters必须返回一个函数。比如我们需要传入菜单的level过滤出某个层级的菜单节点：

getters: {
  getMenuByLevel(state) {
    return function(level) {
      return state.filter(menu => {
        return menu.level === level;
      })
    }
  }
  // 或者这样写
  getMenuByLevel: (state) => (level) => {
    return state.filter(menu => {
      return menu.level === level;
    })
  }
}

可以看到，这时getters不再用名词命名，因为从功能逻辑上它已经变成一个根据level查询结果的函数，此时它应该这样调用：

...
let secondMenuList = this.$store.getters.getMenuByLevel(2);
...

并不是从state中取值总要定义getters，getters仅用于封装复杂的取值逻辑。

(3). mutations

用于向store提交一个修改事件，这是Vuex提供的修改state变量值的唯一方法。

注意，并不是说下面的语法无法修改state的值：

this.$store.state.name = '张三';

这个语句从正确性来说没有任何问题，它会正确修改state.name的值，并且会正常触发响应式系统。

它的唯一问题是，当有多个组件依赖这个变量的值时，没人知道是哪个组件修改了它的值，也不知道是何时修改的，这个变量的修改过程无法被追踪。假如当前系统非常庞大，数据依赖复杂，这种无法追踪的修改会导致代码难以调试和维护。

为此，Vuex规定，state中变量的值必须通过事件来修改，这样Vuex就可以通过注册钩子函数来追踪状态变化，这也是各大状态管理框架的常规思路。

你可以像下面这样定义一个更新state的逻辑：

state: { name: 'carter' },
mutations: {
  setName(state, name) {
    state.name = name;
  }
}

这里定义了一个修改事件：setName，Vuex会在调用它的时候自动传入当前state对象，通过它你可以完成对state的修改。在组件中，如果你想修改state中的值，可以通过提交这个事件，并传入参数：

this.$store.commit('setName', '张三');
// 或者
this.$store.commit({type: 'setName', name: '张三'});

Vuex在Store的原型上提供了一个可以订阅修改事件的方法：subscribe，如果你需要编写一个在state的值发生修改时进行处理的Vuex插件，一定会用到这个方法（Vuex自身提供的状态追踪，本质上就是通过这个方法注册监听mutation事件的钩子函数实现的）。

通过mapMutations辅助函数，你可以把store中的mutations映射成组件的方法：

import { mapMutations } from 'vuex';
...
methods: {
  ...mapMutations(['setName']),
  localFn (name) {
    this.setName(name);
  }
}

mapMutations的操作实际上非常简单，它只是将setName处理成以下实现：

methods: {
  setName(name) {
    this.$store.commit('setName', name);
  }
}

mutations有一个严格的规定，就是禁止包含异步操作，这是为了让Vuex能正确追踪state的变化。

Vuex追踪state变化的逻辑是，向所有的mutations事件注册一个钩子函数，一旦某个mutation函数（如setName）执行完毕，Vuex会立即查询当前state的状态，并显示在devtools中。注意，查询state状态的回调函数是提前注册好的，它不会等待mutation中的异步逻辑执行完才调用，也就是说，Vuex在state还未发生变化时就去查询了当前state的状态，而state真正变化时，Vuex并不知道，这样Vuex就无法实现对state的追踪了。

注意，在mutations中包含异步逻辑并不会导致系统异常，它只是会让Vuex的追踪功能（以及其他与state相关的功能）失效。

那么遇到需要异步处理的逻辑该怎么办呢？答案就是提交actions。

(4). actions

actions是为了解决mutations不能包含异步代码而设计的。我们可以这样理解actions：它封装了一些异步操作，这些异步操作的结果将用于修改state的值，当它得到这些值时，会通过提交mutations来修改state的值。

言外之意，actions不修改state的值，它对state造成的影响是通过提交mutations体现的。下面是一个简单的actions：

import axios from 'axios';
...
state: { name: 'carter' },
mutations: {
  setName(state, name) {
    state.name = name;
  } 
},
actions: {
  fetchName(store, url) {
    axions.get(url).then(res => {
      store.commit('setName', res.data);
    })
  }
}

在组件中这样分发一个action：

...
this.$store.dispatch('fetchName', url);
...

这个语句会触发名为fetchName的action，并传入参数url。Vuex会调用对应的函数，传入当前的store对象，并将url作为第二个参数传入。然后在函数内，axios会发送一个请求，得到用户名后通过store.commit('setName', res.data)提交修改name的事件，state.name随即发生变化。

如果你不需要完整的store对象，可以用es6的解构赋值提取需要的方法：

fetchName({ commit }, url) {
    axions.get(url).then(res => {
      commit('setName', res.data);
    })
  }

store的所有属性都可以这样提取出来，以方便使用。

actions可以像mutations一样映射为组件方法，这需要使用mapActions辅助函数：

import { mapActions } from 'vuex';
...
methods: {
  ...mapActions(['fetchName']);
}
// 调用格式为：this.fetchName(url);

在实际使用actions时，我们经常需要知道actions何时执行完毕，以为其定义后续的处理逻辑，或者在某些情况下组合使用多个action，这可以借助Promise或者async函数实现：

actions: {
  fetchName(store, url) {
    return new Promise(function(resolve, reject) {
      axions.get(url).then(res => {
        store.commit('setName', res.data);
        resolve();
      }).catch(e => {
        reject(e);
      })
    })
  }
  // async的版本
  async fetchName(store, url) {
    store.commit('setName', await axios.get(url));
  }
}

现在这个actions函数返回的是一个Promise对象，因此你可以为它注册后续的回调事件：

this.$store.dispatch('fetchName', url).then(res => {
  // state.name变化后的操作
})

你还可以组合使用action，来完成更复杂的逻辑，比如我们现在要提交一个actionB，但它需要另一个actionA执行完后才能执行，于是可以定义下面的action：

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

现在当你在组件中分发一个actionB时，它在函数内会自动分发actionA，等待其执行成功，才会继续执行后面的逻辑。

Vuex在Store的原型上定义了subscribeAction方法，来订阅特定的action事件，并为其定义钩子函数。如果你需要编写处理action的Vuex插件，很可能需要这个方法。

(5). modules

这是为了对庞大的store进行模块化分解而设计的。

假如某个应用极其复杂，有上百个共享变量需要在state维护，与每个共享变量相关的getters、mutations、actions更是数不胜数，那么这个store的庞大程度可想而知。另外，假如store中的state由不同的开发人员维护，还可能发生命名冲突、意外修改等严重的问题。

为此，Vuex提出将state的变量按照一定逻辑划分成不同的模块，单独维护。每个划分出来的模块，就称为一个module。它包含自己专有的state、getters、mutations、actions，甚至可以继续定义自己的子模块modules：
moduleA

export const moduleA = {
  namespaced: true,  // 使用单独的命名空间
  state: {},
  mutations: {},
  actions: {}
}

index.js

import moduleA from './module/moduleA';

new Vuex.Store({
  state: {},
  mutations: {},
  actions: {}.
  modules: {
    moduleA
  }
})

module中有一个特殊的属性，叫namespaced，表示是否要使用单独的命名空间。默认情况下，这个值为false，即不启用单独的命名空间。

此时所有模块内部的getters、mutations和actions都是注册到全局命名空间的，也就是说向全局store提交的commit，或者派发的action也会被子模块监听到。如：

new Vuex.Store({
  state: {},
  mutations: { setName: (state) => {...} },
  modules: {
    moduleA: {
      state: {},
      muttations: { setName: (state) => {...} },
    }
  }
})

我们看到，全局空间和moduleA都定义了名为setName的mutation，并且moduleA没有启用单独的命名空间，因此下面的commit会导致两个都被触发：

this.$store.commit('setName', name);

而如果为moduleA启用单独的命名空间，moduleA就被高度封装了，上面向全局空间提交的commit不会再对moduleA生效。此时再想向moduleA提交一个commit必须这样：

this.$store.moduleA.commit('setName', name);

是否启用单独的命名空间要依具体的需求而定。

如果需要用辅助函数将模块内的state、getters、mutations和actions映射到组件内，需要用到Vuex提供的createNamespacedHelpers方法：

import { createNamespacedHelpers  } from 'vuex';
const { mapState, mapGetters, mapMutations, mapActions} = 
    createNamespacedHelpers('moduleA');
...
computed: {
  ...mapState([...]),
  ...mapGetters([...])
},
methods: {
  ...mapMutations([...]),
  ...mapActions([...])
}

上面的辅助函数不一定要全部导入，比如当前组件只需要moduleA的name和对应的mutation：setName，就可以这样写：

import { createNamespacedHelpers  } from 'vuex';
const { mapState, mapMutations} = 
    createNamespacedHelpers('moduleA');
...
computed: {
  ...mapState(['name']),
  // 其他计算属性
},
methods: {
  ...mapMutations(['setName']),
  // 其他method
}

在模块内部，getters、mutations和actions接受的第一个参数与全局作用域不同。

对于getters，它的第一个参数是当前模块的state，而不是根state。如果你需要在getters内访问根state或根getters，可以作为第三、四个参数传入：

getters: {
  name(state, getters, rootState, rootGetters){
    ...
  }
}

对于mutations，它只能访问当前模块的state。这就意味着你不能用当前模块内的mutation去修改根状态。

对于actions，它接收的第一个参数不再是全局的store对象，而是当前模块对应的上下文对象context。你可以通过它的rootState属性来访问根状态，以及它的rootGetters访问根getters：

const moduleA = {
  // ...
  actions: {
    actionA ({ state, commit, rootState, rootGetters }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

在模块内可以注册全局的action：

modules: {
    moduleA: {
      namespaced: true,
      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... }
        }
      }
    }
  }

它会在向全局store派发action时被调用，但是却可以拿到当前模块的上下文对象（当然该对象的rootState，rootGetters也可以访问到全局state和getters）。

store在创建完成后仍然可以动态注册模块：

import Vuex from 'vuex'
const store = new Vuex.Store({ /* 选项 */ })

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

动态注册的模块可以用store.unregisterModule('myModule')的语法卸载，但是该语法不能卸载静态模块（即初始化时创建的模块）。

3. 项目结构

Vuex的store是全局唯一的，因此一般直接在src下维护。

如果没有使用模块，而全局状态比较复杂，可以把state、getters、mutations和actions单独提出来，在index中整合，如：

src
  |- store
      |- index.js
      |- state.js
      |- getters.js
      |- mutations
      |- actions

index.js一般这样写：

import Vue from 'vue'
import Vuex from 'vuex'

import { state } from './state'
import { getters} from './getters'
import { mutations} from './mutations'
import { actions} from './actions'

Vue.use(Vuex);
export default Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

main.js中这样引入store：

import App from './App.vue'
import store from './store'

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

当然，如果store中维护的变量很少，可以直接在index.js中定义这些属性。

如果项目的store很复杂，需要用模块维护，一般会用一个文件夹对模块单独维护：

src
  |- store
      |- modules
          |- moduleA.js
          |- moduleB.js
      |- index.js

index.js需要这样改写：

import Vue from 'vue'
import Vuex from 'vuex'

import { moduleA } from './modules/moduleA'
import { moduleB } from './modules/moduleB'

Vue.use(Vuex);
export default Vuex.Store({
  state: {},
  ...
  modules: {
    moduleA,
    moduleB
  }
})

注意，即使使用模块，你也可以定义全局state、getters等，如果它足够复杂，也可以提取到外部文件，这完全视情况而定。

二、Vuex架构简介

1. Vue.use(Vuex)做了什么

这一部分我们会结合少量的Vuex源码，介绍Vuex工作的大致原理。

首先我们来看Vue.use(Vuex)做了什么。

我们知道，Vue.use是注册第三方组件的一般方法，它会去调用组件提供的install方法将组件注册到Vue上，下面看Vuex提供的install方法：

function install (_Vue) {
    if (Vue && _Vue === Vue) {
      {
        console.error(
          '[vuex] already installed. Vue.use(Vuex) should be called only once.'
        );
      }
      return
    }
    Vue = _Vue;
    applyMixin(Vue);
  }

前面的例行检查可以忽略，Vuex真正的注册逻辑就是调用applyMixin方法，我们看它的实现：

function applyMixin (Vue) {
    var version = Number(Vue.version.split('.')[0]);

    if (version >= 2) {
      Vue.mixin({ beforeCreate: vuexInit });
    } else {
      ... // 兼容Vue 2.0以前的代码，可以忽略
    }
    
    /**
     * Vuex init hook, injected into each instances init hooks list.
     */
    function vuexInit () {
      var options = this.$options;
      // store injection
      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;
      }
    }
  }

在Vue 2.0以上的版本（2.0以下的实现是等价的，我们可以跳过），Vuex通过Vue.mixin({ beforeCreate: vuexInit })向每个组件的beforeCreate生命周期钩子中混入了一个方法：vueInit。也就是说，Vue在初始化任何一个组件，并且经历完beforeCreate这个生命周期后，都会执行这个vueInit函数。

接着来看vueInit的实现。它首先检查当前实例的$options是否包含store属性，这里的store属性就是我们在下面的初始化语句传入的。

new Vue({
  store,
  ...
})

如果存在store属性，Vuex会将其挂载到当前组件对象的$store属性上，供组件访问。

也就是说，如果在new Vue时传入了store对象，那么在创建每个组件，并且初始化到beforeCreate这个生命周期时，Vuex向Vue混入的vueInit钩子函数就会被调用，它会检查options是否传入了store对象，如果是，就添加到this.$store属性上（如果store是函数，会先执行它）。

这样，我们的store对象就成了组件对象的$store属性。

下面我们来看const store = new Vuex.Store({ ... })做了什么。

2. new Vuex.Store({ … })做了什么

Store是Vuex提供的构造函数，用于构造Store实例，它的实现如下：

var Store = function Store (options) {
    ... // 例行检查，如Vue和Vuex是否安装，是否通过new调用等
    
    // store internal state
    this._committing = false;
    this._actions = Object.create(null);
    this._actionSubscribers = [];
    this._mutations = Object.create(null);
    this._wrappedGetters = Object.create(null);
    this._modules = new ModuleCollection(options);
    this._modulesNamespaceMap = Object.create(null);
    this._subscribers = [];
    this._watcherVM = new Vue();
    this._makeLocalGettersCache = Object.create(null);

    // bind commit and dispatch to self
    var store = this;
    var ref = this;
    var dispatch = ref.dispatch;
    var commit = ref.commit;
    this.dispatch = function boundDispatch (type, payload) {
      return dispatch.call(store, type, payload)
    };
    this.commit = function boundCommit (type, payload, options) {
      return commit.call(store, type, payload, options)
    };

    // strict mode
    this.strict = strict;

    var state = this._modules.root.state;

    // init root module.
    // this also recursively registers all sub-modules
    // and collects all module getters inside this._wrappedGetters
    installModule(this, state, [], this._modules.root);

    // initialize the store vm, which is responsible for the reactivity
    // (also registers _wrappedGetters as computed properties)
    resetStoreVM(this, state);

    // apply plugins
    plugins.forEach(function (plugin) { return plugin(this$1); });

    var useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools;
    if (useDevtools) {
      devtoolPlugin(this);
    }
  };

跳过最前面的例行检查。首先，Vuex将传入的参数接收进来，保存在对应的属性内，同时定义一些用于管理订阅者、模块等的内部属性。

然后定义了触发mutation和action的commit和dispatch实例方法。

接着是初始化模块（installModule），每个模块基本上也可以看做一个store对象。

再接着是构建Vuex的响应系统（resetStoreVM）。到目前为止，Vuex并没有接入Vue的响应式系统，因此它的state变化并不会带来响应式效果，Vuex没有重新实现响应式系统，而是像下面一样用state和getters创建一个新的Vue实例：

function resetStoreVM (store, state, hot) {
    ...
    store._vm = new Vue({
      data: {
        $$state: state
      },
      computed: computed
    });
    ...
}