@skydi/vuex

Vuex 辅助类

封装Vuex方法，使其在vue开发中，具有TypeScript风格

一.安装

yarn add @skydi/vuex

二.使用

1.创建文件

//创建文件 User.ts

//引入文件

import Vuex from "@skydi/vuex"

//创建类并添加上装饰器

@Vuex()
export default class User{

    //创建State
    Name:any = "leyozt"
    Age:any = 18

    //创建Getters 方法名必须是"G_"开头，必须全部大写。
    G_NAME(store:User){
        return store.Name
    }
    //创建Mutations 方法名必须是"M_"开头，必须全部大写。
    M_NAME(store:User,data:any){
        store.Name = data
    }
    //创建Actions 方法名必须是"A_"开头，必须全部大写。
    A_NAME(ctx:any,data:any){
        ctx.commit('M_USER_NAME',data)
    }

    G_AGE(store:User){
        return store.Age
    }
    M_AGE(store:User,data:any){
        store.Age = data
    }
    A_AGE(ctx:any,data:any){
        ctx.commit('M_USER_AGE',data)
    }
}

2.在Store/index.ts中初始化

//引用文件
import {store as Store} from "@skydi/vuex"
import User from "./User" //引入创建的文件

const store = Store({
    User,
})

declare let window:any
window.Store = store  //绑定到window上，方便在控制台中查询
export default store

3.在vue中使用

1）用Getter获取值

import { Getter } from "vuex-class"
@Getter("G_USER_NAME")  //注意：需要在 方法G_NAME中加入创建的类名User.
Name:any
@Getter("G_USER_AGE") 
Age:any

2）用this获取值

get Name(){
    return this.$store.state.User.Name
}

3) 调用 Actions 修改值

this.$store.dispatch(方法名必须大写,传递的数据)  //注意：需要在 方法G_NAME中加入创建的类名
this.$store.dispatch('A_USER_NAME','LEYOZT')

4）通过set_action 修改值

import {set_action} from "@skydi/vuex" //引入文件
set_action(文件类名，方法名，数据)
set_action('User','Name','LEYOZT')