pinia开发

# 1. Vue X VS Pinia

完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
极其轻巧 (体积约 1KB)
store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
支持多个 Store
支持 Vue devtools、SSR 和 webpack 代码拆分

# 2. 安装 Pinia

# 安装仓库
npm i pinia

# 安装持久化插件
npm i pinia-plugin-persist

1
2
3
4
5

使用方法 :

使用 import ??? from '@/stores/???.ts' 引入
调用就直接用？？？.xxx（xxx 包括：state、getters、actions）就好。
代码中获取 state 时如果用了解构赋值，需要用 storeToRefs 进行包裹（保持 state 的响应式特性）；获取 getters、actions 中的函数时，可以直接解构！

# 3. 创建 store 结构

 store
 -- index.js # 主仓库
 -- useInfo.js # 子仓库

1
2
3

// index.js  主仓库
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist' // 导入持久化插件
import system from "./system.js";  // 导入子仓库

const stores = createPinia() // 创建仓库
export const registerStore = ()=>{
    stores.system = system()
}
stores.use(piniaPluginPersist)

export default stores

1
2
3
4
5
6
7
8
9
10
11
12

// usr.js  子仓库

import { ref,reactive } from 'vue'
import router from '@/router'
import { defineStore } from 'pinia'

export default defineStore('system',()=>{
  const token = ref('')
  const userInfo = reactive({})
  
  function getUserInfo(){
    this.token = '123'
    return new Promise(resolve => {
      resolve(this.token)
    })
  }
  return {token,userInfo, getUserInfo}
},
  {
    persist: {
      enabled: true, // 开启数据缓存
      // 你可以在strategies里将存放位置由 sessionStorage 改为 localStorage；也可指定paths存储哪些数据
      // strategies默认会将所有变量存储在sessionStorage中，所以一般情况下可不用设置！
      strategies: [
        {
          storage: localStorage,
          paths: ['userInfo']
        },
        {
          storage: sessionStorage,
          paths: ['token']
        }
      ]
    }
  }
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 4. main.js 挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'


import stores from './store'
import {registerStore} from './store'

const app = createApp(App)
app.use(stores)
registerStore()
app.use(router)

app.mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 5. 配置 vite.config.ts (js 情况下无需配置)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import path from 'path'
const resolve = dir=>path.join(__dirname,dir)

export default defineConfig({
  // 配置路径别名
  resolve: {
    alias: {
      // 设置路径 这里resolve和join可自行选用
      '~': path.resolve(__dirname, './'),
      // 设置别名
      '@': path.resolve(__dirname, './src')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  },
  plugins: [vue()],
    // 构建选项
    build: {
        cssCodeSplit: false, // false表示禁用CSS代码分割，将所有css 抽取到一个文件中（默认为true）
        brotliSize: true, // 启用/禁用 brotli 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能（默认为true）
        chunkSizeWarningLimit: 1024, // chunk 大小警告的限（以 kbs 为单位）（默认为500）
        // 打包pinia的配置项(将pinia的全局库实例打包进vendor，避免和页面一起打包造成资源重复引入)
        rollupOptions: {
            output: {
                manualChunks(id) {
                    if (id.includes(resolve(__dirname, '/src/stores/index.ts'))) {
                        return 'vendor'
                    }
                }
            }
        }
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 6. 在组件中使用

<template>
  <div class="systemTools">
    <div>
      <h1 style="font-size: 30px">测试pinia状态管理</h1>
      <div style="margin-top: 30px">
        <div>
          Pinia的state: count = <b>{{ count }}</b>
        </div>
        <button @click="COUNT_ADD">点我(count++)</button>
        <button @click="CUONT_DOUBLE">点我(count双倍)</button>
        <div>获取getters中的count值:{{ COUNT_GETTERS() }}</div>
      </div>
      <div style="margin-top: 30px">
        <div>
          Pinia的state: count = <b>{{ stores.piniaDemo2.count }}</b>
        </div>
        <button @click="stores.piniaDemo2.COUNT_ADD">点我(stores.piniaDemo2.count++)</button>
        <button @click="stores.piniaDemo2.CUONT_DOUBLE">点我(count双倍)</button>
        <div>获取getters中的count值:{{ stores.piniaDemo2.COUNT_GETTERS() }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { storeToRefs } from 'pinia'
  import stores from '@/stores'
  const { count } = storeToRefs(stores.piniaDemo1) // 解构数据（使用storeToRefs将pinia中的数据变为响应式的）
  const { COUNT_ADD, CUONT_DOUBLE, COUNT_GETTERS } = stores.piniaDemo1 // 解构方法
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 7. 清空 pinia 保存在本地的内容

根绝上方的例子来看：

sessionStorage.setItem('user', '')

#pinia #vue3 #vite

上次更新: 1/11/2024, 7:31:12 AM

← 计算属性 vs 方法 vs 侦听属性 Vue反编译相关总结→