上一篇我们看了项目中的在但页面使用{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';<