zoukankan      html  css  js  c++  java
  • [Vuex] Use Namespaces in Vuex Stores using TypeScript

    Even by using modules, they still share the same namespace. So you couldn’t have the same mutation name in different modules. Namespaces solve that by prepending the path of the module to the StateGetterAction, and Mutation.

    This lesson shows how to use namespaces in Vuex modules with TypeScript.

    Enable namespaced to each feature store:

    import {GetterTree, MutationTree, Module} from 'vuex';
    import {TodosState, RootState} from '../types';
    import {Todo} from '../types';
    
    const state: TodosState = {
        todos: [
            {text: 'Buy milk', checked: false},
            {text: 'Learning', checked: true},
            {text: 'Algorithom', checked: false},
        ],
    };
    
    const getters: GetterTree<TodosState, RootState> = {
        todos: (state, getters, rootState) => state.todos.filter(t => !t.checked),
        dones: (state, getters, rootState) => state.todos.filter(t => t.checked)
    };
    
    const mutations: MutationTree<TodosState> = {
        addTodo(state, newTodo) {
            const copy = {
                ...newTodo
            };
            state.todos.push(copy);
        },
        toggleTodo(TodosState, todo) {
            todo.checked = !todo.checked;
        }
    };
    
    const actions: ActionTree<TodosState, RootState> = {
        addTodoAsync(context, id) {
            fetch('https://jsonplaceholder.typicode.com/posts/'+id)
                .then(data => data.json())
                .then(item => {
                    const todo: Todo = {
                        checked: false,
                        text: context.rootState.login.user + ': ' + item.title
                    }
    
                    context.commit('addTodo', todo);
                })
        }
    }
    
    export const todos: Module<TodosState, RootState> = {
        actions,
        state,
        mutations,
        getters,
        namespaced: true
    };

    Now we need to modify the component to adopt the namespace:

    <template>
    <section>
        <h4>Todos</h4>
        <ul>
          <li v-for="todo in todos">
            <input type="checkbox" :checked="todo.checked" @change="toggleTodo(todo)">
            {{ todo.text }}
          </li>
        </ul>
        <h4>Done</h4>
        <ul>
          <li v-for="todo in dones">
            <input type="checkbox" :checked="todo.checked" @change="toggleTodo(todo)">
            {{ todo.text }}
          </li>
        </ul>
        <p>
          <label for="">
            Add todo:
            <input type="text" v-model="newTodo.text" @keyup.enter="addTodo(newTodo)">
          </label>
          <label for="">
            Add todo async:
            <input type="text" v-model="id" @keyup.enter="addTodoAsync(id)">
          </label>
    
        </p>
    </section>
    </template>
    
    <script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import {Action, State, Getter, Mutation, namespace} from 'vuex-class';
    import {TodosState, Todo} from '../types';
    
    const TodoGetter = namespace('todos', Getter);
    const TodoAction = namespace('todos', Action);
    const TodoMutation = namespace('todos', Mutation);
    
    @Component({
    })
    export default class Todos extends Vue {
        @TodoGetter todos: TodosState;
        @TodoGetter dones: TodosState;
    
        @TodoMutation addTodo;
        @TodoMutation toggleTodo;
        @TodoAction addTodoAsync;
    
        newTodo: Todo = {
          text: '',
          checked: false
        }
    
        id: string = '1';
    }
    </script>

    If we want to trigger a different namesapce state update from Todo State, we can do it in action:

    const actions: ActionTree<TodosState, RootState> = {
        addTodoAsync(context, id) {
            fetch('https://jsonplaceholder.typicode.com/posts/'+id)
                .then(data => data.json())
                .then(item => {
                    const todo: Todo = {
                        checked: false,
                        text: context.rootState.login.user + ': ' + item.title
                    }
    
                    context.commit('addTodo', todo);
                    context.commit('login/login', null, {root: true}); // we have to say {root: true}, otherwise, it will look for the state under 'todos' namespace
                })
        }
    }

    Login mutation:

    const mutations: MutationTree<LoginState> = {
        login (state) {
            state.isLoggedIn = true;
            state.user =  'alice';
        }
    }
  • 相关阅读:
    Android 适配知识点
    Android Studio各种快捷功能及好用的插件
    81.Android之沉浸式状态栏攻略
    8.Android 系统状态栏沉浸式/透明化解决方案
    为开发者准备的 Android 函数库(2016 年版)
    GitHub 上 57 款最流行的开源深度学习项目
    7.Android开源项目WheelView的时间和地址联动选择对话框
    6.初探Asynctask
    5.Android消息推送机制简单例子
    让你Android开发更简单
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10789848.html
Copyright © 2011-2022 走看看