Vue3.0脚手架+typescript+vuex（基础二）即（vue全家桶+typescript使用总结）

原创

已于 2022-08-18 12:03:28 修改 · 8.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2019-05-08 14:01:52 首次发布

本文介绍了在Vue3项目中结合typescript使用Vuex进行状态管理的方法。详细讲解了store、states、mutations、actions和getters的设置，并展示了在.vue文件中如何引入和使用Vuex。通过示例代码，阐述了每个部分的作用和编写规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇我们看了项目中的在但页面使用{Component, Vue, Watch, Prop, Emit}等装饰器方法；那么在本章我们看一下项目中我们使用vuex+typescript。在这里我在sec下创建store.ts，states.ts，mutations.ts，actions.ts，getters.ts。

在看之前我们首先了解一下vuex到底是什么东西?vuex和redux都被称为同一状态管理，也被称之为全局状态管理，我们在state中定义的变量，可以在单个vue组件中使用，也可以在组建中做修改，并且你修改的可以全局得到响应。

我们先来看store.ts，store.ts作为整个vuex的输入模块，在其里面引入vuex及vue，并且使用use的方法将vuex挂载到vue上面，同时我们将states，mutations，actions，getters引入进来，并导出store库，在main.ts中引入store.ts同时将store注册到vue项目中，store.ts写法如下：

import Vue from 'vue';
import Vuex from 'vuex';
import state from './states';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

Vue.use(Vuex);

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});

main.ts的写法和之前的写法相同：