pinia下载使用

1.下载

npm i pinia

2.注册

main.ts中

import { createApp } from 'vue'
import { createPinia } from 'pinia' //引入
import { createPersistedState } from "pinia-plugin-persistedstate";
import App from './App.vue'
import router from './router'

const app = createApp(App)
const pinia = createPinia()//创建
pinia.use(createPersistedState())
app.use(pinia)//使用
app.use(router)

3.使用

在src目录中新建一个store目录存放相关模块

pinia是每个模块单独一个文件

import { ref, computed } from 'vue'
import { defineStore, PiniaVuePlugin } from 'pinia'


export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return {
    count,
    doubleCount,
    increment,
  }
})

然后再组件中使用

<script setup>
  import { useCounterStore } from "../stores/counter";
  const counterStore = useCounterStore()
     或者结构赋值
  const { count, doubleCount } = storeToRefs(counterStore)
  const { increment } = counterStore
<script>
<template>
  <div>
    <div>
      count的值:{{ counterStore.count }}
    </div>
    <div>
      计算属性doubleCount:{{ counterStore.doubleCount }}
    </div>
    <button @click="counterStore.increment">点我count增加</button>
  </div>
</template>