提供一个vue3的pinia示例
时间: 2024-09-20 13:03:07 浏览: 25
Vue3中,Pinia是一个官方推荐的状态管理库,它结合了Vuex的思想和Composition API的便利性。下面是一个简单的Pinia示例:
首先,你需要安装`@vue/pinia`库:
```bash
npm install @vue/pinia
```
然后,在项目根目录下创建一个store文件夹,并在其中创建一个`store.js`文件,设置初始状态和全局的action、mutation:
```javascript
import { createStore } from '@vue/pinia'
export const useStore = createStore({
state: () => ({
count: 0,
}),
actions: {
increment(context) {
context.commit('incrementCount')
},
},
mutations: {
incrementCount(state) {
state.count++
},
},
})
```
接下来,在需要使用store的地方,导入并使用`useStore`:
```javascript
// 组件A.vue
<script setup>
import { useStore } from '@/store'
const store = useStore()
function handleClick() {
store.increment()
}
</script>
<button @click="handleClick">Increment</button>
```
在这个例子中,每次点击按钮,`incrementCount` mutation会被触发,进而更新`count`状态。