vue3 + typescript里 vuex-class 的用法

首先看一下项目结构：

先看 store/modules下的 loginStore.ts 文件

import { Commit } from 'vuex'
// 定义的 state 数据
const state: any = {
    loginData: 'login'
}

const mutations: any = {
    LOGIN_SET(states: any, params: object) {
        states.loginData = params
    }
}

const actions: any = {
    loginAction(context: { commit: Commit }, params: object) {
        context.commit('LOGIN_SET', params)
    }
}

export default {
    namespaced: true, // 必须要开放
    state,
    mutations,
    actions
}

这是 store下的 index.ts文件

import Vue from "vue";
import Vuex from "vuex";
import homeStore from "@/store/modules/homeStore";
import loginStore from '@/store/modules/loginStore';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {// 把 store/modules下的文件引入
    homeStore,
    loginStore
  }
});

这是在 views/login 下 Login.vue 里的调用

<script lang="ts">
import { Component, Vue, Provide } from 'vue-property-decorator'
import { Getter, Action, State, namespace } from "vuex-class"
// 相当于引入 store/modules 下的 loginStore 文件
const loginModule = namespace('loginStore')

@Component({})
export default class login extends Vue {
    @Provide() private data: any = {
        pageName: 'loginPage'
    }
	// 通过 loginModule 来调用对用的模块的数据和方法
    // state
    @loginModule.State(state => state.loginData) loginData: any

    // action
    @loginModule.Action('loginAction') loginAction: any

    mounted() {
    	// 这是调用 Action 里的 loginAction 方法，用this调用，
    	// this.data.pageName为传入的参数：loginPage
        this.loginAction(this.data.pageName)
        console.log(this.loginData) // loginPage, 通过 this 来调用 state 的数据
    }
}
</script>