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>
  • 相关阅读:
    学习python第二天
    学习python第一天
    SQL操作
    JAR规范 JAR File Specification
    IDEA快捷键
    Fibonacci数列
    AnyHandler
    测试UDP
    Eclipse卡顿设置
    服务器初始化操作
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10784731.html
Copyright © 2011-2022 走看看