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>

页面效果

初始效果

点击按钮后

相关推荐
Vicky&James2 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_748233646 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟14 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386315 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596016 分钟前
前端代理,解决跨域问题讲解
前端
quitv21 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238130 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星31 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
Joey_friends40 分钟前
【Linux】线程详解
开发语言
_GR1 小时前
Qt开发⑧Qt的窗口_下_浮动窗口+对话框
开发语言·css·c++·qt·microsoft