zoukankan      html  css  js  c++  java
  • [Vuex] Lazy Load a Vuex Module at Runtime using TypeScript

    Sometimes we need to create modules at runtime, for example depending on a condition. We could even want to lazy load that module by using Webpack’s code splitting feature.

    For example, in current appliation, we are loading login and todos modules at the same time, now what we want is lazy load login module:

    import Vue from 'vue';
    import Vuex from 'vuex';
    
    import {todos} from './todos';
    import {login} from './login';
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      modules: {
        todos,
        login,
      }
    });

    Go to the main.ts file, set login module to be lazy load:

    import './hooks';
    
    import Vue from 'vue';
    import App from './App.vue';
    import router from '@/router';
    import store from '@/store/index';
    import '@/registerServiceWorker';
    Vue.config.productionTip = false;
    
    const load = true;
    if (load) {
      import('./store/login').then(({login}) => {
        store.registerModule('login', login);
      });
    }
    
    new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount('#app');

    We can use dynamic import syntax to lazy load login store.

    To support the syntax, we need to change "compilerOptions.modules='esnext'".

    To code safty. in login component, we add v-if to check the login module is loaded or not:

    <template>
        <section v-if="login">
            <button v-if="!login.isLoggedIn" @click="loginMutation">Login</button>
            <p v-else>Hello {{login.user}}</p>
        </section>
    </template>
    
    <script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import {State, Mutation} from 'vuex-class';
    import {LoginState} from '../types';
    
    @Component()
    export default class Login extends Vue{
        @State login: LoginState;
        @Mutation('login') loginMutation;
    }
    </script>
  • 相关阅读:
    软件工程读书笔记(9)——第九章 软件实现
    软件工程读书笔记(8)——第八章 面向对象设计
    学习进度03
    【转】python编码规范
    vim配置有竖对齐线
    编写自动升级程序
    XPath定位+web UI元素汇总
    黑马程序员入学基础测试(四)
    linux环境
    使用Micrisoft.net设计方案 前言
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10784731.html
Copyright © 2011-2022 走看看