cli3+typescript的tsx开发模板搭建过程分享(2)

// store/modules/system/mutation.ts import type from "./mutation-type"; const mutation: any = { [type.SET_USER_INFO as string](state: SystemState, user: Object) { state.user = user; } } export default mutation;

import type from "./mutation-type"; import { Commit } from "vuex"; export const cacheUser = (context: { commit: Commit }, user: Object) => { context.commit(type.SET_USER_INFO as string, user); }

然后建立一个system的入口文件 index.ts 将这些外抛出去：

// store/modules/system/index.ts import state from "./state"; import mutations from "./mutation"; import * as actions from "./action"; import * as getters from "./getter"; export default { namespaced: true, state, getters, mutations, actions };

最后在store的入口文件处引用该module：

// store/index.ts import Vue from "vue"; import Vuex from "vuex"; import system from "./modules/system"; Vue.use(Vuex); export default new Vuex.Store({ modules: { system } });

接着我们去组件 button.tsx 中使用： 

// components/button/button.tsx import { Component, Prop } from "vue-property-decorator"; import * as tsc from "vue-tsx-support"; // 引入store命名空间 方便使用某个模块 import { namespace } from "vuex-class"; // 通过namespace(module name)的方式使用某个模块的store const systemStore = namespace("system"); @Component export default class ZButton extends tsc.Component<ButtonProps> { @Prop() text!: string; // store使用state和action 其他getter和mutation类型 @systemStore.State("user") user!: Object; @systemStore.Action("cacheUser") cacheUser: any; public btnClick(value: string): void { console.log("value is: ", value); // 点击调用store的action方式存储user信息 // 而state中的user信息会同步 可通过vue-tools查看 this.cacheUser({ name: "张三", phone: "13333333333" }); } // 点击事件中调用mixin的方法 protected render() { return ( <div> <button onClick={() => this.btnClick()}>{this.text}</button> </div> ); } }

Tips: 基于typescript的vuex，还在想更优的一种方式。

Ps: 头一次写文章，难免有点紧张，如果问题，欢迎讨论。感谢~

最终的template在这里

总结

到此这篇关于搭建基于vue-cli3+typescript的tsx开发模板的文章就介绍到这了,更多相关vue typescript模板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章: