# lj-pinia

**Repository Path**: jian-liu-one/lj-pinia

## Basic Information

- **Project Name**: lj-pinia
- **Description**: 一个简单的pinia状态管理机
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-09
- **Last Updated**: 2024-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# lj-pinia

> 项目包含 defineStore 和 createPinia方法

这是官方版本地址 [its documentation](https://pinia.vuejs.org/zh/) pinia

## License

[MIT](http://opensource.org/licenses/MIT)


#### 介绍
一个简单的pinia状态管理机，使用简单，只有几K大小。

#### 软件架构
采用Vue3 + Ts 完成

#### 安装教程

1. 安装 `npm i lj-pinia`

#### 使用说明

```
import { createApp, Plugin } from 'vue'
import { createPinia } from 'lj-pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
//不可省略
app.use(pinia as Plugin<[]>)
app.mount('#app')
```

```
//创建仓库示例
export const useStore = defineStore('storeId', {
    state: () => ({ count: 1 }),
    getters: {
        double: (state: { count: 0 }) => {
            return state.count * 2
        },
    },
    actions: {
        increment() {
            this.count++
        },
    },
})
```

```
<script setup lang="ts">
import { useCounterStore } from './store';
const store = useCounterStore()
</script>
<template>
  <button @click="() => {
    store.increment()
  }">
  {{ store.count }}
  </button>
  <div>
    {{ store.double }}
  </div>
</template>
```