@jaqen404/vue-brass
v0.0.18
Published
brass integration for vue
Downloads
22
Maintainers
Readme
vue-brass
brass integration for vue
brass 的 vue 插件
安装
yarn add @jaqen404/vue-brass
or
npm install @jaqen404/vue-brass
使用
// store.js
import { createVueStore } from "@jaqen404/vue-brass";
const state = {
count: 1,
people: {
name: "tom",
age: 11,
},
};
const getters = {
doubleCount: (state: State) => state.count * 2,
};
const mutations = {
// 注意:mutasions方法里,不能有返回值
add: (amount: number) => (state: any) => {
state.count += amount;
},
changeName: (name: string) => (state: any) => {
state.people.name = name;
},
};
const actions = {
doAsync:
(a: number, b: number) =>
async ({ mutations }) => {
await new Promise((resolve: any) => {
setTimeout(resolve, 3000);
});
mutations.sum(a, b);
return a + b;
},
};
export const useFirstStore = createVueStore(
"firstStore",
state,
getters,
mutations,
actionss
);
<script lang="ts" setup>
import { defineComponent, ref } from "vue";
import { useFirstStore } from "../store/main";
const store = useFirstStore();
const handleClick = () => {
store.add(1);
};
const handleClickName = () => {
store.setState(state => {
state.people.name += state.count;
})
}
</script>
<template>
<div>
<div @click="handleClick">{{ store.doubleCount }}</div>
<div @click="handleClickName">{{store.people.name}}</div>
<div @click="handleClick">{{ store.count }}</div>
<div>
</template>