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

本文介绍了在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的写法和之前的写法相同:

import store from '@/store/store';<
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值