VUE3状态管理Pinia使用介绍
vue3中推荐使用的状态管理工具:pinia,真的很好用官方文档,中文文档
一、安装pinia
yarn add pinia
# 或者使用 npm
npm install pinia
二、src文件夹下新建store文件夹,并新建index.ts
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
三、在main.ts中引入pinia
import pinia from './store'
const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')
以上三个步骤,就已经配置好pinia了,具体使用,就是在store文件夹下创建一个个具体的store就可以了,一下以创建一个counter.ts为例说明
1.在store文件夹下创建文件 counter.ts,代码如下
import { defineStore } from 'pinia'
//创建一个id为counter的store,// 第一个参数是应用程序中 store 的唯一 id
const useCounterStore = defineStore('counter', {
state: () => ({
counter: 100
}),
getters: {
doubleCounter(state) {
return state.counter * 2
}
},
actions: {
changeCounterAction(newCounter: number) {
this.counter = newCounter
}
}
})
export default useCounterStore
注意:具体的store命名一般以use开头
2.在组件中使用store
<template>
<div class="main">
<h2>main: {{ counterStore.counter }}-{{ counterStore.doubleCounter }}</h2>
<button @click="changeCounter">修改counter</button>
</div>
</template>
<script setup lang="ts">
import useCounterStore from '@/store/counter'
const counterStore = useCounterStore()
function changeCounter() {
counterStore.changeCounterAction(123)
}
</script>