pinpa的使用

1、安装

yarn add pinia
# or with npm
npm install pinia

https://pinia.vuejs.org/zh/

2.1如果你使用的是 Vue CLI，你可以试试这个 非官方插件。 创建一个 pinia 实例（根存储）并将其作为插件传递给应用程序：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

2.2如果您使用的是 Vue 2，您还需要安装一个插件并将创建的 pinia 注入应用程序的根目录：

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // other options...
  // ...
  // 请注意，可以在同一页面上的多个 Vue 应用程序中使用相同的 `pinia` 实例
  pinia,
})

3、例子（计数器）
你可以先创建一个 Store：stores/counter.js

//1.导入use打头的方法
import {useCounterStore } from  '@/stores/counter'
//2.执行方法得到store实例对象
export const useCounterStore =useCounterStore ()
console.log(useCounterStore)
<template>
<button @click="CounterStore.increment">{{CounterStore.count}}</button>
</template>

点击时会新增