vuex配置 和 vuex-class使用

配置

一般配置，举一个例子

//mutation-types.ts
export const SET_USERID = "SET_USERID";

//state.ts
export default {
  userId: "",
};

//mutations.ts
import * as types from "./mutation-types";
export default {
  [types.SET_USERID](state: any, data: any) {
    state.userId = data;
  }
};

//actions.ts
import * as types from "./mutation-types";
export const setUserId = ({ commit }: any, data: any) =>
  commit(types.SET_USERID, data);

//getters.ts
export const getUserId = (state: any): number => state.userId;

//index.ts
import Vue from "vue";
import Vuex from "vuex";

import * as actions from "./actions";
import * as getters from "./getters";
import state from "./states";
import mutations from "./mutations";

//modules配置
//import testModule from "./module/test/store";

Vue.use(Vuex);

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

如果要导入modules,配置如下

同样的目录结构，index.ts做一下导出

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

import * as actions from "./actions";
import * as getters from "./getters";
import state from "./states";
import mutations from "./mutations";

Vue.use(Vuex);

export default {
  namespaced: true,//namespaced务必加上不然获取不到，无法使用
  state,
  getters,
  mutations,
  actions
};

使用

假设test模块存在userName的操作，类似主模块上userId的操作

<script lang='ts'>
import Vue from 'vue'
import { Mutation, Action, Getter, namespace } from "vuex-class";
import { Component, Watch } from "vue-property-decorator";

//获取要使用的module
const TestModule = namespace('testModule')

@Component
export default class MyComp extends Vue {
	//直接使用主模块的功能
	//module使用方法
    //推荐使用action，如果要使用mutation写法一样
    //@Mutation('SET_USERID') setUserId!: any;
    @Action('setUserId') setUserId!: any;
    @Getter('getUserId') getUserId!: string;

    @Watch('getUserId')
    private UserId(val){
    	//此处可监听到'123123'
    	console.log(val);
    }
    //当前组件的自定义方法
    private setUserIdFunc(){
		this.setUserId('123123');
	}

	//module使用方法
    @TestModule.Action('setUserName') setUserName!: any;
    @TestModule.Getter('getUserName') getUserName!: string;
	//监听写法是一样的
    @Watch('getUserName')
    private UserName(val){
    	//此处可监听到'张三'
    	console.log(val);
    }
    //当前组件的自定义方法
    private setUserNameFunc(){
		this.setUserName('张三');
	}
}
</script>