前言
在 TypeScript + vue 系列 (一): 新项目配置 中, 我们已经初始化了一个 TypeScript + Vue 的模板. 但是对于一个大型的 Vue 项目来说, Vuex 的使用是必不可少的. 所以这一节我们将来展示一下如何在 Vue + TypeSciprt 的项目中中引入 Vuex. 如果想在 Vuex 中写 TypeScript, 需要借助 vuex-class .
下载依赖
在命令行下输入以下内容
npm install vuex vuex - class--save
添加 Couter.vue
在 src/components / 下新增 Couter.vue 文件, 用于展示项目中引入了 Vuex 的效果
初始化 Couter.vue 单文件
增添路由跳转到 Couter.vue
<template>
<div class="counter">
<h1>
Couter.vue
</h1>
</div>
</template>
<script>
import Vue from 'vue'import Component from 'vue-class-component'@Component export
default class Counter extends Vue {}
</script>
在 src/router/index.ts 中新增对 Couter.vue 组件的跳转
因为装饰器的缘故, 会出现以下的报错信息
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'
import Counter from '@/components/Counter.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/counter',
name: 'Couter',
component: Counter
}
]
})
报错信息
只需要按照指引
npm install babel - plugin - transform - decorators - legacy--save - dev
, 并在. babelrc 中新增
"plugins": ["transform-decorators-legacy"]
, 即可消除错误信息
查看 Counter.vue 是否添加成功
在 url 中输入
http://localhost:8080/#/counter
, 可以看到 Counter.vue 添加成功
Counter.vue 初始化成功
增加 Vuex 及相关文件
在 src / 下新建 store 文件夹, 并在 store 文件夹中新增 index.ts, state.ts, mutations-types.ts, mutations.ts, actions.ts 共 5 个文件. 文件内容如下所示
index.ts 文件
state.ts 文件
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex);
export default new Vuex.Store({
state,
mutations,
actions
})
mutations-types.ts 文件
export default {
initNumber: 1
}
export const INCREMENT_NUMBER = 'INCREMENT_NUMBER';
mutations.ts 文件
actions.ts 文件
import * as types from './mutations-types'
import { MutationTree } from 'vuex'
const mutations: MutationTree<any> = {
[types.INCREMENT_NUMBER](state, data:number): void {
state.initNumber += data;
}
}
export default mutations
main.ts 中引入 store
import * as types from './mutations-types'
export default {
incrementNumberAsync({ commit }, data:number) {
setTimeout(() => {
let mutation = types.INCREMENT_NUMBER;
commit(mutation, data)
}, 1000)
}
}
修改 Couter.vue 单文件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
<h1>从Vuex中获取的数字是: {{number}}</h1>
<template>
<div class="counter">
<h1>Coute.vue</h1>
<button @click="incrementNumber(1)">点击同步加1</button>
<button @click="incrementNumberAsync(1)">点击异步加1</button>
参考链接
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { State, Action, Mutation} from 'vuex-class'
import * as types from '../store/mutations-types'
@Component
export default class Counter extends Vue {
@State('initNumber') number
@Mutation(types.INCREMENT_NUMBER) incrementNumber
@Action('incrementNumberAsync') incrementNumberAsync
}
</script>
示例代码
Github 仓库
TypeScript 相关文档
TypeScript 入门教程
TypeScript 官网
参考文章
Decorators in ES7: ES7 中装饰器
ES7 Decorator 装饰者模式
vue + typescript 新项目起手式
vue + typescript 进阶篇
来源: http://www.jianshu.com/p/954505735541