Pinia

Pinia是vue专属的最新状态管理库，是Vuex状态管理工具的替代品，中文官网

安装

yarn add pinia
# 或者使用 npm
npm install pinia

使用

创建一个 pinia 实例 (根 store) 并将其传递给应用：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

基础使用

getters实现

getters直接使用computed函数进行模拟，组件中需要使用需要把getters return 出去

action异步实现

storeToRefs工具函数

该函数可以辅助保持数据（state+getter）的响应式解构
以doubleCount例子说明

import { userCounterStore } from './store/setcount'
const handleClick = userCounterStore()
const {count,doubleCount} = handleClick

//上面这种方式的解构会导致响应式丢失，这时，就可以用到storeToRefs工具函数

const {count,doubleCount} = storeToRefs(handleClick) 
//storeToRefs工具函数不会丢失响应式，但是只能state和getter数据，action的方法正常解构即可