写一个vue pina的用例
时间: 2024-05-02 18:21:40 浏览: 10
Vue Pina是一个Vue.js插件,用于管理和响应状态管理库Pinia的状态。
以下是一个Vue Pina的用例:
```vue
<template>
<div>
<h1>{{ count }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { useStore } from 'vue-pina'
import { defineStore } from 'pinia'
const useCounterStore = defineStore({
id: 'counter',
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++
}
}
})
export default defineComponent({
setup() {
const store = useStore(useCounterStore)
const increment = () => {
store.increment()
}
return {
count: store.count,
increment
}
}
})
</script>
```
在这个例子中,我们定义了一个名为“counter”的状态存储,它有一个名为“count”的状态和一个名为“increment”的操作。
我们使用Vue Pina的“useStore”函数来创建一个与“counter”存储关联的存储对象。然后,我们在组件的“setup”函数中使用该存储对象来获取“count”状态和“increment”操作,并将它们暴露给模板。
最后,我们在模板中显示“count”状态,当用户点击“increment”按钮时调用“increment”操作以增加计数器的值。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)