ts项目vuex怎么写

vue+ts项目vuex怎么写，下面我们来看看demo:

开启模块化：

如有一个store文件夹，里面有模块和index：

具体内容如下：

OneStore.ts

import { Module, VuexModule, Mutation, Action } from "vuex-module-decorators";

@Module({ name: "OneStore", namespaced: true, stateFactory: true })
export default class OneStore extends VuexModule {
  public OneStoreCount: number = 0;

  @Mutation
  public OneStoreMutation(val: number) {
    this.OneStoreCount += val;
  }

}

TwoStore.ts

import { Module, VuexModule, Mutation, Action } from "vuex-module-decorators";

@Module({ name: "TwoStore" })
export default class Store02 extends VuexModule {
  TwoStoreStr: string = "twostore";  
  
  @Mutation
  TwoStoreMutation(str: string) {
      this.TwoStoreStr = str;
  }

}

index.ts

import Vue from 'vue'
import Vuex from 'vuex'
import OneStore from "./modules/OneStore";
import TwoStore from "./modules/TwoStore";
import { getModule } from "vuex-module-decorators";

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 1,
    tourList: []
  },
  getters: {},
  mutations: {
    CSCANSHU(state, value) {
      state.count += value.num;
    },
  },
  actions: {
    csCanshu({ commit }, value) {
      commit('CSCANSHU', value)
    }
  },
  modules: {
    OneStore,
    TwoStore
  }
})

export default store

const OneStoreModule = getModule(OneStore, store);
const TwoStoreModule = getModule(TwoStore, store);

export {
  OneStoreModule,
  TwoStoreModule
}

使用：

  import { OneStoreModule, TwoStoreModule } from "../store";
  get oneStore() {
    return OneStoreModule.OneStoreCount;
  }

  get twoStore() {
    return TwoStoreModule.TwoStoreStr;
  }
  
  handleAdd() {
  	// 触发store one 模块里面的内容：
    OneStoreModule.OneStoreMutation(20);
  }