自定义插件异步拆分Vuex文件

左手的ㄟ右手 2022-12-02 04:12 161阅读 0赞

## 背景 ##

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

我们可以按模块异步拆分Vuex文件，即不同模块导入自己需要用到得Vuex文件。

## 原理 ##

在需要用到的vuex的vue页面，加入isVuex是否需要异步加载vuex的判断，如果需要就加载对应的Vuex文件

## 文件目录 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]

## 步骤 ##

**1、需要用到vuex的vue文件内部加入isVuex**

name: 'mode1Index',//名字需要和模块内的vuex文件名一致，方便后续使用
    isVuex: true

**2、编写异步拆分vuex的插件**  
vueplugin/index.js

总vuex文件，store/index.js

import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
    export default new Vuex.Store({ 
        state:{ 
            num: 1
        }
    })

模块vuex文件，module/model1Index.js

export default { 
        state:{ 
            num2: 3
        }
    }

**3、main.js中导入使用插件**

import vuepl from './vueplugin'
    vuepl.use(vuepl)

**4、页面内使用**

<template>
      <div class="hello">
        <h1>{ {  msg }}</h1>
        <h1>{ { $store.state.num}}</h1>
        <h1>{ { $store.state.mode1Index.num2}}</h1>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'mode1Index',
      isVuex: true,
      data () { 
        return { 
          msg: 'Welcome to Your Vue.js App',
        }
      }
    }
    </script>

效果展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 1]

**5、打包之后你就会看到会多一个处理文件，即对应的模块vuex的处理文件，已经被单独拆分出来**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/efdb603da3f7440086d245f38ab8ac7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/ad257c980dd846fbad9e37c6e22aa3a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/7917fb1528ce45919dae0d5740ec3cde.png