前提
写法是用的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>