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
};

[Vuex] Split Vuex Store into Modules using TypeScript的更多相关文章

  1. vuex动态引入store modules

    主要解决的问题每次建一个module需要自己去主index.js里面去注册 为了偷懒,也为了避免团队开发时同时对index.js 进行修改引发冲突 所以在index.js中 动态的对子目录和模块进行注 ...

  2. 【vue】vue +element 搭建项目,vuex中的store使用

    概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...

  3. 踩坑记录-nuxt引入vuex报错store/index.js should export a method that returns a Vuex instance.

    错误 store/index.js代码如下: import Vue from 'vue'; import Vuex from 'vuex'; import city from './moudle/ci ...

  4. vuex里面的store架构

    将store文件夹分为四个文件夹,分别是actions,getters,mutations,state. action:和mutatation功能是类似的,都是修改state里面的数据,区别是acti ...

  5. Vuex项目实战store

    首先简单了解一下什么是Vuex? Vuex是一个专为Vue.js应用程序开发的状态管理模式.采用集中式存储来管理应用所有组件的状态. 以下是对vuex的使用的简单介绍: 一.安装 npm i vuex ...

  6. 【Vuex】vuex基本介绍与使用

    Vuex是什么? 官方解释: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集 ...

  7. [vuex]——使用vuex解决模块间传值问题

    二月的第四个周末,在家.受寒流的影响,深圳天气持续冰冻了好几天,天冷人就变得懒动,迷迷糊糊睡到了快十点,终于在饥饿的催促下起床. 和妹子吃完粥后,百无聊赖.透过窗户,发现太阳依旧没有露头的打算,我们也 ...

  8. vuex : 用vuex控制侧栏点亮状态

    上代码. xxx.vue <template> <div id="xxx"> <div class="layout"> &l ...

  9. [Webpack + React] Import CSS Modules with TypeScript and webpack

    If you try to use CSS Modules in TypeScript the same way you would use them in JavaScript, with webp ...

随机推荐

  1. 三色抽卡游戏 博弈论nim

    你的对手太坏了!在每年的年度三色抽卡游戏锦标赛上,你的对手总是能打败你,他的秘诀是什么? 在每局三色抽卡游戏中,有n个卡组,每个卡组里所有卡片的颜色都相同,且颜色只会是红(R).绿(G).蓝(B)中的 ...

  2. Python中元类

    元类(metaclass) 简单地说,元类就是一个能创建类的类,而类class 是由type创建的,class可以创建对象 type与object的关系详见:python中type和object 1. ...

  3. day 47 htm-part2

    列表 无序列表====所谓无序就是显示出来的效果没有编号排序 <ul type='disc'> <li>第一项</li> <li>第二项</li& ...

  4. Java中对数组的操作

    数组对于每一门编程语言来说都是重要的数据结构之一,当然不同语言对于数组的实现及处理也不尽相同. Java语言中提供的数组是用来存储固定大小的同类型元素.如:声明一个数组变量,numbers[100]来 ...

  5. Spring MVC中Controller返回值void时报错

    Controller如下: 当使用url访问该处理器方法时,报错如下: 26-Jan-2019 21:16:28.105 警告 [http-nio-8080-exec-39] org.springfr ...

  6. [OPENCV]cvHoughLines2使用说明

    1.cvHoughLines2函数定义: CvSeq *cvHoughLines2 { CvArr *image, void *line_storage, int method, double rho ...

  7. [P1020]导弹拦截 (贪心/DP/二分/单调队列)

    一道很经典的题 这道题就是要求一个最长单调不升子序列和一个最长单调上升子序列. 先打了一个n2复杂度的 用DP #include<bits/stdc++.h> using namespac ...

  8. vim技巧3

    yyp复制当前行到下一行ddp剪切当前行到下一行cw:删除当前单词并进入插入模式xp:交换当前字符和右边字符s:删除光标所在的字符并进入插入模式I:在行首开始输入文字并进入插入模式A:在行尾开始输入文 ...

  9. Redis 数据变化通知服务实践

    从Redis 2.8.0版本起,Redis加入了“Keyspace notifications”(即“键空间通知”)的功能.键空间通知,允许Redis客户端从“发布/订阅”通道中建立订阅关系,以便客户 ...

  10. js计算总页数

    前端js取余是a%b 取除数parseInt(a / b) /** * 总页数@param(总条数,每页总条数) */ function pageTotal(rowCount, pageSize) { ...