前提
写法是用的vue3,只是一些简单的写法
stores文件中的counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++
}
}
})
actions: increment 的使用
只是单纯调用该方法,actions是可以改变源数据的
mport { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
const handleClick = () => {
store.increment()
}
getters:doubleCount 的使用
我的理解,getters是用来改造数据的,非元数据,改造过的可以直接调用
<template>
<div class="right-view">
<div>2倍count值:{{ store.doubleCount }}</div>
</div>
</template>
<script setup>
import { useCounterStore } from '../stores/counter'
const store = useCounterStore()
</script>
state:count
源数据
<template>
<div class="right-view">
<div>当前count值:{{ store.count }}</div>
</div>
</template>
<script setup>
import { useCounterStore } from '../stores/counter'
const store = useCounterStore()
</script>
标签:count,const,counter,初步,理解,useCounterStore,pinia,stores,store
From: https://www.cnblogs.com/zongkm/p/17333174.html