zoukankan      html  css  js  c++  java
  • [Vuex] Split Vuex Store into Modules using TypeScript

    When the Vuex store grows, it can have many mutations, actions and getters, belonging to different contexts.

    Vuex allows you to split your store into different contexts by using modules.

    In this lesson we’ll see how can we split the store in multiple Vuex modules using TypeScript

    From the code we have before:

    import Vue from 'vue';
    import Vuex from 'vuex';
    
    import todos, {getters, mutations, actions} from './todos';
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      state: {
        ...todos,
      },
      getters,
      mutations,
      actions
    });

    To:

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

    You can put 'getters, actions, mutations, state' into 'modules' which has many features as key 

    modules: {
      todos: {getters, actions, state, mutations},
      login  : {getters, actions, state, mutations},
    }

    Todo store:

    import {GetterTree, MutationTree} from 'vuex';
    import {State} from '../types';
    import {Todo} from '../types';
    
    const state: State = {
        todos: [
            {text: 'Buy milk', checked: false},
            {text: 'Learning', checked: true},
            {text: 'Algorithom', checked: false},
        ],
    };
    
    const getters: GetterTree<State, any> = {
        todos: state => state.todos.filter(t => !t.checked),
        dones: state => state.todos.filter(t => t.checked)
    };
    
    const mutations: MutationTree<State> = {
        addTodo(state, newTodo) {
            const copy = {
                ...newTodo
            };
            state.todos.push(copy);
        },
        toggleTodo(state, todo) {
            todo.checked = !todo.checked;
        }
    };
    
    const actions: ActionTree<tate, any> = {
        addTodoAsync(context, id) {
            fetch('https://jsonplaceholder.typicode.com/posts/'+id)
                .then(data => data.json())
                .then(item => {
                    const todo: Todo = {
                        checked: false,
                        text: item.title
                    }
    
                    context.commit('addTodo', todo);
                })
        }
    }
    
    export const todos = {
        actions,
        state,
        mutations,
        getters
    };
  • 相关阅读:
    服务器负载均衡的基本功能和实现原理
    几种负载均衡技术的实现
    Postman-CI集成Jenkins
    Postman-进阶
    Postman-简单使用
    chrome安装插件,安装Postman
    关于angularjs dom渲染结束再执行的问题
    Protractor(angular定制的e2e)的简易入门
    关于ng-router嵌套使用和总结
    scss使用后的简单入门总结
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10784633.html
Copyright © 2011-2022 走看看