vue ts pinia用法
Vue.js 和 TypeScript 是一种流行的 Web 开发技术栈，而 Pinia 是一个基于 Vue 3 的状态管理库。下面是使用 Vue+TypeScript+Pinia 的基本用法：
1. 安装 Pinia：
  ```
  npm install pinia
  ```
2. 创建和配置一个 Pinia 实例：
  ```typescript
  import { createPinia } from 'pinia'
  import { App } from 'vue'
  const pinia = createPinia()
  export function setupPinia(app: App<Element>) {
    app.use(pinia)
  }
define的基本用法
  ```
3. 创建一个 Pinia store：
  ```typescript
  import { defineStore } from 'pinia'
  export const useCounterStore = defineStore('counter', {
    state: () => ({
      count: 0
    }),
    actions: {
      increment() {
        unt++
      },
      decrement() {
        unt--
      }
    }
  })
  ```
4. 在组件中使用 Pinia store：
  ```typescript
  <template>
    <div>
      <p>Count: {{ unt }}</p>
      <button @click="counter.increment">Increment</button>
      <button @click="counter.decrement">Decrement</button>
    </div>
  </template>
 
  <script>
  import { useCounterStore } from './store'
  export default {
    setup() {
      const counter = useCounterStore()
      return { counter }
    }
  }
  </script>
  ```
在上面的代码中，我们首先通过 `defineStore` 创建了一个名为 `counter` 的 Pinia store，它包含一个 `count` 状态和两个用于增减计数的动作。然后在组件中通过 `useCounterStore`
函数创建了一个与 `counter` store 相关联的实例，可以直接访问状态和动作。
注意：Pinia 还支持模块化和命名空间等高级用法，可以根据实际需求进一步扩展。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。