72 - vue3案例 - 03 -Pinia构建仓库和持久化

一. Pinia构建仓库

1. 构建用户stores

        src\stores\user.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

// 用户模块 token setToken removeToken
export const useUserStore = defineStore('big-user', () => {
  const token = ref('') // 初始化token
  const setToken = (newToken) => {
    token.value = newToken //设置token
  }
  const removeToken = () => {
    token.value = '' // 删除token
  }

  return {
    token,
    setToken,
    removeToken
  }
})

2. 页面中使用

        App.vue

<script setup>
import { useUserStore } from '@/stores/user'

// 使用仓库
const userStore = useUserStore()
</script>

<template>
  <div>
    <p>{{ userStore.token }}</p>
    <el-button @click="userStore.setToken('adsd1231')">登录</el-button>
    <el-button @click="userStore.removeToken()">退出</el-button>
  </div>
</template>

二. 持久化

官方文档：Home | pinia-plugin-persistedstate

1. 安装插件

pnpm add pinia-plugin-persistedstate -D

2. main.js注册

// import { createApp } from 'vue'
// import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
// import App from './App.vue'
// import router from './router'
// import '@/assets/main.scss'
// const app = createApp(App)
app.use(createPinia().use(persist))
// app.use(router)
// app.mount('#app')

3. 用户stores配置持久化

        src\stores\user.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

// 用户模块 token setToken removeToken
// defineStore(唯一标识,数据,持久化)
export const useUserStore = defineStore(
  'big-user',
  () => {...},
  {
    persist: true
  }
)

三. Pinia仓库统一管理

1. pinia独立维护

        (1). 将main.js中pinia相关的的代码提取出来

                src\stores\index.js

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(persist)

export default pinia

        (2). main.js注册提取出的pinia

//import { createApp } from 'vue'
//import App from './App.vue'
//import router from './router'
import pinia from '@/stores/index'
//import '@/assets/main.scss'

//const app = createApp(App)

app.use(pinia)
//app.use(router)

//app.mount('#app')

        (3). 代码示例

2. 仓库统一导出

        (1).  创建 src\ stores\ modules文件夹

                将除了index.js 的其他stores全部放进去

        

        (2).  index.js中统一导出 其他stores

                src\ stores\index.js

//import { createPinia } from 'pinia'
//import persist from 'pinia-plugin-persistedstate'

//const pinia = createPinia()
//pinia.use(persist)
//export default pinia


// 统一导出: 相当于收集中转一下
 import { useUserStore } from './modules/user'
 export { useUserStore }
 import { useCountStore } from './modules/counter'
 export { useCountStore }
 接收user模块的所有按需导出,等价于上面代码
export * from './modules/user'
export * from './modules/counter'

               (3). 页面中调用

                        App.vue

<script setup>
// 直接从stores中导入收集仓即可调用所有stores
import { useUserStore, useCountStore } from '@/stores'

// 使用仓库
const userStore = useUserStore()
const countStore = useCountStore()
</script>

<template>
  <div>
    <p>{{ userStore.token }}</p>
    <el-button @click="userStore.setToken('adsd1231')">登录</el-button>
    <el-button @click="userStore.removeToken()">退出</el-button>

    <hr />
    {{ countStore.count }}
    <el-button @click="countStore.add(2)">加法2</el-button>
  </div>
</template>

<style scoped></style>

        (4). 代码示例