import { defineStore } from 'pinia'
时间: 2024-01-02 16:02:42 浏览: 34
`defineStore`是Pinia库中的一个函数,用于定义一个新的store。这个函数接收一个对象作为参数,用于定义store的属性和方法。
下面是一个使用`defineStore`的示例代码:
```javascript
import { defineStore } from 'pinia'
export const useCounterStore = defineStore({
id: 'counter', // store的唯一标识符
state: () => ({
count: 0,
}),
getters: {
doubleCount: (state) => state.count * 2,
},
actions: {
increment() {
this.count++
},
decrement() {
this.count--
},
},
})
```
在上面的示例中,我们使用`defineStore`函数来定义一个名为`useCounterStore`的store。在`state`对象中定义了一个名为`count`的状态属性,初始值为0。在`getters`对象中定义了一个名为`doubleCount`的计算属性,它返回`count`的两倍。在`actions`对象中定义了两个方法,分别用于增加和减少`count`的值。
然后,你可以在Vue组件中使用这个store,例如:
```vue
<template>
<div>
<h1>Count: {{ count }}</h1>
<h2>Double Count: {{ doubleCount }}</h2>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script>
import { useCounterStore } from './useCounterStore'
export default {
name: 'App',
setup() {
const counterStore = useCounterStore()
return {
count: counterStore.count,
doubleCount: counterStore.doubleCount,
increment: counterStore.increment,
decrement: counterStore.decrement,
}
},
}
</script>
```
在上面的示例中,我们使用`useCounterStore`函数来获取`useCounterStore`的实例,并在组件中使用它的属性和方法。
希望这个示例能够帮助你理解如何使用`defineStore`函数来定义一个Pinia store。如果有任何疑问,请随时提问!