Vuex-class

Vuex-class是Vuex和vue类组件的绑定助手，主要用于Vue2.0+TS使用store的全局变量和方法。
1.安装Vuex-class

npm install --save vuex-class

2.store文件目录结构

3.index.ts

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

Vue.use(Vuex)

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

4.state.ts

export default {
	//全局变量
    topType:false,
}

5.getter.ts

export default {
	//获取对应的全局变量
  topType (state:any) {
    return state.succeed
  },
}

6.mutations-type.ts

//存储字符
export const SET_TOP_TYPE = 'SET_TOP_TYPE'

7.mutations.ts

//这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
import {
  SET_TOP_TYPE
} from './mutations-type'
export default {
  //保存物品分类列表
  [ SET_TOP_TYPE] (state:any, flag:any) {
    state.topType = flag
  }
}

8.actions.ts

//Action 提交的是 mutation，而不是直接变更状态。
//Action 可以包含任意异步操作。
import {
  SET_TOP_TYPE
} from './mutations-type'

export default {
  //保存物品分类列表
  setTopType ({ commit }:any,flag:boolean) {
    commit( SET_TOP_TYPE, flag)
  },
}

9.使用vuex-class

import {State,Action,Mutation} from 'vuex-class'
export class MyComp extends Vue {
	@State private topType:boolean;
	@Action private setTopType:any;
	@Mutation private SET_TOP_TYPE:any;
}