这个算是一个小的demo嘛,先放上开源github地址:https://github.com/sascha245/vuex-simple

倒是可以先看下效果



呃呃,因为这个项目所在的目录与平时我们一般项目写在src中不同,我甚至怀疑这个本身其实是一个插件,这个demo只是其中的测试项目。

先看下项目目录



首先还是从基础文件进入项目

//main.ts
import 'reflect-metadata'; import Vue from 'vue';
import VueTypedi from 'vue-typedi'; import App from './App.vue';
import router from './router';
import store from './store'; Vue.config.productionTip = false;
Vue.use(VueTypedi); new Vue({
render: h => h(App),
router,
store
}).$mount('#app');
//samples\router.ts
import Vue from "vue";
import Router from "vue-router"; import About from "./views/About";
import Home from "./views/Home"; Vue.use(Router); export default new Router({
routes: [
{
component: Home,
name: "home",
path: "/",
},
{
component: About,
name: "about",
path: "/about",
}
]
});



这个里面比较有意思的是分离了ts文件,其实应该说就像是js文件也可以这样分解啊,不过这个算是打开了我的思路

接下来我们看核心内容home页面

我们进一步进行分析,发现减这个行为是比较独立的,先看减数

state中给其定义了不同的module,比如my1可以看做是核心的store

import { Module, State } from '../../../../src';
import { MyModule } from '../my'; export class TestState {
@Module()
public my1 = new MyModule(5); @Module()
public my2 = new MyModule(); @State()
public counter: number = 10; @State()
public name: string = 'Will';
}
//samples\store\modules\my.ts
import { Mutation, State } from '../../../src'; export class MyModule {
@State()
public counter: number = 0; @Mutation()
public increment() {
this.counter++;
} constructor(counter = 0) {
this.counter = counter;
}
}
//samples\store\modules\test\getters.ts
import { Getter } from '../../../../src';
import { TestState } from './state'; export class TestGetters extends TestState {
@Getter()
public get cachedGetter() {
return {
item: this.counter + 100
};
} @Getter()
public get total() {
return this.counter + this.my1.counter + this.my2.counter;
} public get normalGetter() {
return {
item: this.counter + 100
};
}
}
//samples\store\modules\test\mutations.ts
import { Mutation } from '../../../../src';
import { TestGetters } from './getters'; export class TestMutations extends TestGetters {
@Mutation()
public setCounter(count: number) {
this.counter = count;
} @Mutation()
public increment() {
this.counter++;
}
}
//samples\store\store.ts
import { Action, Getter, Module, Mutation, State } from '../../src';
import { MyModule } from './modules/my';
import { TestModule } from './modules/test';
import { TodoModule } from './modules/todo'; export class MyStore {
@Module()
public my = new MyModule(20); @Module()
public test = new TestModule(); @Module()
public todo = new TodoModule(); @State()
public version = '2.0.0'; @State()
public rootCounter = 0; @Getter()
public get aRootCounter() {
return this.rootCounter;
} /**
* Getter example with method style access
*/
@Getter()
public get numberButIncreased() {
return (nb: number) => {
return nb + 1;
};
} @Mutation()
public incrementRootCounter() {
this.rootCounter += 1;
} @Action()
public async actionIncrementRootCounter() {
await new Promise(r => setTimeout(r, 1000));
this.incrementRootCounter();
}
}

后记:我数据流向还是没有弄清除

【心无旁骛】vuex-simple的更多相关文章

  1. 搭建项目vue + vue-router + vuex + vue-i18n + element-ui + egg + sequelize

    vue + vue-router + vuex + vue-i18n + element-ui + egg + sequelize https://www.cnblogs.com/wuguanglin ...

  2. VueX源码分析(2)

    VueX源码分析(2) 剩余内容 /module /plugins helpers.js store.js helpers要从底部开始分析比较好.也即先从辅助函数开始再分析那4个map函数mapSta ...

  3. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  4. PHP设计模式(一)简单工厂模式 (Simple Factory For PHP)

    最近天气变化无常,身为程序猿的寡人!~终究难耐天气的挑战,病倒了,果然,程序猿还需多保养自己的身体,有句话这么说:一生只有两件事能报复你:不够努力的辜负和过度消耗身体的后患.话不多说,开始吧. 一.什 ...

  5. vuex复习方案

    这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.

  6. Design Patterns Simplified - Part 3 (Simple Factory)【设计模式简述--第三部分(简单工厂)】

    原文链接:http://www.c-sharpcorner.com/UploadFile/19b1bd/design-patterns-simplified-part3-factory/ Design ...

  7. vuex 初体验

    vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...

  8. WATERHAMMER: A COMPLEX PHENOMENON WITH A SIMPLE SOLUTION

    开启阅读模式 WATERHAMMER A COMPLEX PHENOMENON WITH A SIMPLE SOLUTION Waterhammer is an impact load that is ...

  9. vuex(1.0版本写法)

    Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/  2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...

  10. BZOJ 3489: A simple rmq problem

    3489: A simple rmq problem Time Limit: 40 Sec  Memory Limit: 600 MBSubmit: 1594  Solved: 520[Submit] ...

随机推荐

  1. MySQL基本命令脚本

    一.基本命令 1.启动服务 说明:以管理员身份运行cmd 格式:net start 服务名称 示例:net start mysql57 2.停止服务 说明:以管理员身份运行cmd 格式:net sto ...

  2. HashMap 什么时候进行扩容呢

    HashMap扩容: 当HashMap中的元素越来越多的时候,碰撞的几率也就越来越高(因为数组的长度是固定的),所以为了提高查询的效率,就要对HashMap的数组进行扩容,数组扩容这个操作也会出现在A ...

  3. MYSQL - database 以及 table 的增删改查

    MYSQL - database 以及 table 的增删改查 MySQL的相关概念介绍 MySQL 为关系型数据库(Relational Database Management System), 这 ...

  4. 爬虫-Requests 使用入门

    requests 的底层实现其实就是 urllib json在线解析工具 ---------------------------------------------- Linux alias命令用于设 ...

  5. webpack官方文档学习

    一.webpack是什么? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 二.安装 前提条 ...

  6. Http学习(二)

    使用首部字段是为了给浏览器和服务器提供报文主体大小.所使用语言.认证信息等 4种首部字段类型 通用首部字段 请求首部字段 响应首部字段 实体首部字段 详细说明: HTTP首部字段类型 通用首部字段: ...

  7. redis服务后台运行

    文章目录 进入redis的安装目录 查看目录结构 进入src目录,普通启动效果 编辑redis服务目录下的redis.conf 进入src目录,执行后台运行的命令 检查服务是否开启 进入redis的安 ...

  8. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  9. POJ-1976-A Mini Locomotive-dp

    A train has a locomotive that pulls the train with its many passenger coaches. If the locomotive bre ...

  10. JSP页面静态化总结之一使用URLRewrite实现url地址伪静态化

    JSP页面静态化总结之一使用URLRewrite实现url地址伪静态化 1使用URLRewrite实现url地址伪静态化1.1URLRewirte的用处 1.满足搜索引擎的要求. 2.隐藏技术实现,提 ...