@jaqen404/vue-brass

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>