Pinia简单使用

安装

shell 复制代码
# 使用 yarn
yarn add pinia
# 或者使用 npm
npm install pinia

使用

  1. 创建一个js文件store/counter.js
javascript 复制代码
import { defineStore } from 'pinia'

// 第一个参数 counter 是应用中 Store 的唯一ID
export const useCounterStore = defineStore('counter', {
    state: ()=>({
        count: 0,
        name: 'demo'
    }),
    getters: {
        doubleCount: (state)=> state.count*2
    },
    actions: {
        increment() {
            this.count++
        }
    }
})
  1. 组件内使用demo.vue
html 复制代码
<template>
  <div>
    <div>count:{{ count }}</div>
    <div>doubleCOunt:{{ doubleCount }}</div>
    <button @click="add">按钮</button>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useCounterStore } from '@/store/counter'

const store = useCounterStore()

// 不可以这样直接解构,会破坏响应式
// const { name, doubleCount } = store

// 获取state的值
const count = computed(()=>store.count)

// 获取getters的值
const doubleCount = computed(()=>store.doubleCount)

// 调用actions修改count
const add = () => {
  store.increment()
}
</script>

页面效果

初始效果

点击按钮后

相关推荐
xwlcfyb4 分钟前
零基础学好C语言系列第八讲:初识指针
c语言·开发语言
非 白5 分钟前
【Java分布式】Nacos注册中心
java·开发语言·nacos·注册中心
88号技师6 分钟前
2025年2月最新SCI-鹰鱼优化算法HawkFish Optimization Algorithm-附Matlab免费代码
开发语言·算法·matlab·优化算法
Vicky&James9 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_7482336413 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟21 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386322 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596023 分钟前
前端代理,解决跨域问题讲解
前端
quitv28 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238136 分钟前
前端如何进行性能优化
前端·性能优化