在使用了TypeScript后，如果项目中用到了vuex，那么可以使用vuex-module-decorators这个第三方库，引入装饰器。

在使用装饰器之前，还是首先来看看TypeScript中，是怎样使用vuex的。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    posts: "这是post"
  },
  mutations: {
    /** 给post赋值 */
    SET_POSTS(state, data) {
      state.posts = data;
    }
  },
  actions: {
    /** 模拟异步获取post的值 */
    getPostsData({ commit }) {
      setTimeout(() => {
        commit("SET_POSTS", "修改post");
      }, 3000);
    }
  },
  modules: {}
});

上面的vuex是生成项目时，官方给出的模板。

但是一般来讲，更推荐下面的这种方式，声明一个接口规范state里面的状态类型：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

/** 规范state里面状态的类型 */
export interface MainState {
  /** 测试用的状态 */
  posts: string;
}

export default new Vuex.Store<MainState>({
  state: {
    posts: "这是post"
  },
  mutations: {
    /** 给post赋值 */
    SET_POSTS(state, data) {
      state.posts = data;
    }
  },
  actions: {
    /** 模拟异步获取post的值 */
    getPostsData({ commit }) {
      setTimeout(() => {
        commit("SET_POSTS", "修改post");
      }, 3000);
    }
  },
  modules: {}
});