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';
        }
    }
  • 相关阅读:
    Unable to open the physical file xxxx. Operating system error 2
    Apache Solr 实现去掉重复的搜索结果
    solr调用lucene底层实现倒排索引源码解析
    lucene-solr本地调试方法
    lucene实战--打分算法没有那么难!
    avalon新一代UI库发布
    让 IE6支持max-height
    迷你MVVM框架 avalonjs 1.3.2发布
    less gradient-vertical 方法的实现
    sass compact方法的实现
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10789848.html
Copyright © 2011-2022 走看看