最近项目技术更新，决定用vitejs+vue3+pinia重写项目。我们决定一步到位直接script setup方式来写，边学边写边记录：

1、先安装

npm i pinia-plugin-persist

2、main.ts中引入

import {createPinia} from 'pinia'
import App from './App.vue'
import router from './router/index'
import piniaPersistPlugin from 'pinia-plugin-persist'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPersistPlugin)
app.use(pinia)
app.use(router)
app.mount('#app')

3、新建store/index.ts，然后添加store的总管理脚本：

//import { storeToRefs } from 'pinia'
import appStore from './modules/appStore'
//import userStore from './modules/userStore'


export default {
  appStore,
 // userStore,
}

4 、在store文件夹下创建：/modules/appStore.ts文件：

import {defineStore} from 'pinia'
import {ref} from 'vue'
import loginStore from './loginStore'
const useAppStore = defineStore(
  'appStore',
  () => {
    let loadNum = ref(0)
    const hideLoading = () => {
      loadNum.value--
    }
    const showLoading = () => {
      loadNum.value++
    }
    const isLoading = () => {
      return loadNum.value > 0
    }
    return {
      hideLoading,
      showLoading,
      isLoading
      // loadNum要持久化保存到本地一定要加，当然不加数据响应是没问题的，isLoading也会重新计算，就是不会保存
    }
  }
  //作为第三个参数配置
  // {
  //   persist: {
  //     enabled: true,
  //     strategies: [{storage: localStorage, paths: ['loadNum']}]
  //   }
  // }
)

export default {
  loginStore,
  useAppStore
}

5、ui上的使用

<template>
  <button @click="onButton">点击增加</button>
</template>
<script lang="ts" setup>
import store from '@/store'
const appStore = store.useAppStore()
const onButton = () => {
  appStore.showLoading() //调用
}
</script>
<style lang="scss" scoped></style>

6、看效果

点击之后