1.0.2 • Published 4 years ago
@skydi/vuex v1.0.2
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')