Pinia简单使用1

1.首先安装

yarn add pinia

2.在 src/main.ts 下定义引用 pinia 插件：

import { createPinia } from 'pinia'

createApp(App).use(createPinia()).mount('#app')

3.在src下面新建store文件新建info.ts

import { defineStore } from 'pinia'

export const infoStore = defineStore('info',{
  state: () => ({
      count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
  }
})

4.在要使用的vue文件中引入（路径根据新建的info文件路径来）

<template>
<div>
      <div>info:{{info.count}}</div>
      <button @click="info.increment">info++</button>
</div>
</template>
import { infoStore } from '../store/info'
export default defineComponent({

  setup() {
    const info = infoStore()
    return {
      info
    }
  },
})