How to write the TS project vuex

Vue + TS project vuex

Enable modularization:

If you have a store folder with modules and indexes in it:

The details are as follows:

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; }}Copy the code

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; }}Copy the code

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
}
Copy the code

Use:

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

  get twoStore() {
    return TwoStoreModule.TwoStoreStr;
  }
  
  handleAdd() {
  	// Trigger the contents of the Store One module:
    OneStoreModule.OneStoreMutation(20);
  }
Copy the code