Pinia简单使用

来一颗砂糖橘2024-08-26 9:27

安装

shell 复制代码

# 使用 yarn
yarn add pinia
# 或者使用 npm
npm install pinia

使用

创建一个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++
        }
    }
})

组件内使用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>

页面效果

初始效果

点击按钮后