按需加载Vuex

Vuex是什么？

官方回答就是Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

场景

就拿我们当前项目安全签来说，选择用Vuex的主要目是我们的菜单是变化的，可根据不同角色展示不同的菜单，以及控制其页面得逻辑走向。我们可以通过本地持久缓存存储角色信息，然后每次需要时取出来做些判断，但是同步存储会影响性能，同时也不能及时更新其他页面数据的展示，像消息未读数量的及时更新等，当我们选用了vuex来集中管理这些状态则可以解决这些问题。

使用Vuex所能遇到问题

我们可以把大量的状态在state中进行统一管理，但是有的时候state中的数据并不是每次加载某个组件时都需要用到，像刚进入首页的时候vuex会一次性加载所有状态，影响一部分性能。

解决方案

在管理大量数据的时候可以做一下按需加载state中的状态的。

具体实现

• 首先在state文件夹下创建module文件夹和index.js。

  • module文件夹主要放那些管理按需加载的状态的js文件，其命名规则就是根据组件中的name去命名
  • index.js则可以放置一些全局都用到的状态，例如token，当前用户的权限等。

• 在需要加载指定状态的组件中配置是否需要加载某些状态，这里我们通过isVuex(需要和你写的插件中的判断字段一致)控制

      <script>
          export default{
              name：'loading'
              isVuex:true,//true表示需要按需加载当前文件所需要的状态 /store/module/loading.js
              data(){
                  return {}
              },
          }
      </script>
  

• 在插件中通过判断当前组件是否需要加载state，因为我们再module文件夹中的js文件返回的是一个对象，所以需要手动去注册为vuex

实现按需加载vuex的插件

我们知道vue插件的原理就是通过全局混入（vue.mixin）把所有可配置项(方法、计算属性、生命周期等)结合vuex.use注入到每一个组件的export default对象中,也就是追加到vue实例中。可以是一个函数，也可以是一个对象。

Vue.use&vue.mixin

• Vue.use 具体做了什么事情
  • 如果给的是一个原生方法，则会把其执行一遍，同时将Vue类作为形参传入进去
  • 如果传的是一个函数、对象中含有install方法，则会执行install方法
• vue.mixin 组件的选项配置

  将内置对象中的所有属性混入到所有vue实例中，可以混入methods，data，计算属性，生命周期等。也就是在所有export default{ methods，data，计算属性，生命周期 }中混入进去

实现代码

```js
    import Vue from 'vue';
    const demandLoading={};
    demandLoading.install = function(vue){
        vue.mixin({
            beforeCreate：function(){
                if(this.$options.isVuex){
                    import ('@/store/module/'+this.$options.name).then(res=>{
                        this.$store.registerModule(this.$options.name,res.default)
                    })
                 }
            },
        })
    }
    Vue.use(demandLoading)
```

扩展

[Vue.js 的插件](插件 — Vue.js (vuejs.org))应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}