vue3 使用pinia

• 安装

npm i pinia@2.0.0 --save
# 刷新页面后数据不丢失插件
npm i pinia-plugin-persist@1.0.0 --save

• 实例化 stores/index.js

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const pinia = createPinia()
pinia.use(piniaPluginPersist)

export default pinia

• 创建工具 stores/counter.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  persist: true, // 刷新页面数据仍在
  state: () => ({ count: 0 }),
  getters: {
    double: (s) => s.count * 2,
  },
  actions: {
    inc() {
      this.count++
    },
    dec() {
      this.count--
    },
  },
})

• main.js引入

import pinia from './stores/index'
app.use(pinia)

• 使用

<template>
  <h2>count: {{ count }}</h2>
  <h3>double: {{ double }}</h3>
  <button @click="inc">+</button>
  <button @click="dec">-</button>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

const store = useCounterStore()
// 保持响应式解构
const { count, double } = storeToRefs(store)
// 方法直接取
const { inc, dec } = store
</script>