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
    };
  • 相关阅读:
    jquery ajax 超时设置
    Django 资源文件配置
    ubuntu 部署Django
    在django项目中自定义manage命令(转)
    WampServer的配置
    Django 向数据表中添加字段方法
    3种归并操作js代码
    CORS Cookie,和nodejs中的具体实现
    CORS(跨来源资源共享协议) 与 http 302状态
    IOException while loading persisted sessions: java.io.EOFException
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10784633.html
Copyright © 2011-2022 走看看