vue3之pinia简单使用

一、 Pinia介绍

pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。就是和vuex一样的实现数据共享。
依据Pinia官方文档，Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器，更替Vuex4成为Vuex5。
Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用Pinia。

pinia官方文档

pinia的优点

• pinia 符合直觉，易于学习。
• pinia 是轻量级状态管理工具，大小只有1KB.
• pinia 模块化设计，方便拆分。
• pinia 没有 mutations，直接在 actions 中操作 state，通过 this.xxx 访问响应的状态，尽管可 以直接操作 state，但是还是推荐在 actions 中操作，保证状态不被意外的改变。
  store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或者是 MapAction 辅助函数，这是在 Vuex 中很常见的。
• 支持多个 store。
• 支持 Vue devtools、SSR、webpack 代码拆分。

二、pinia基本使用

1. 首先先安装依赖

   npm install pinia
   1

2. 在main.js中引入pinia并创建容器挂载到根实例上

   //引入stores暴露出的pinia的实例
   import { createPinia } from 'pinia'
   createApp(App).use(createPinia()).use(router).mount('#app')
   1
   2
   3

3. 创建文件夹目录 (index.ts可以抛出总的文件)
   
4. @/stores/a.ts 下存储有关数据

   import { defineStore } from 'pinia'
   
   interface FeatureManageType {
     isIframeParent: boolean
   }
   export const useFeatureStore = defineStore('featureInfo', {
     state: () => ({
       featureInfo: {} as FeatureManageType,
     }),
     actions: {
       getFeatureInfo(params: FeatureManageType) {
         console.log('--pinia---params--', params)
         this.featureInfo = params
       },
     },
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16

   这段代码定义了一个 featureInfo 的 store，包含一个状态和一个 action，用于管理和操作 featureInfo 的状态。
5. 【以通过iframe获取父窗口中的数据为例】给数据赋值 - 存数据

   import { useFeatureStore } from '@/stores'
   
   // 初始化定义值
   const iframeParentInfo = ref({ isIframeParent: true })
   // 获取和操作 featureStore 中的状态
   const featureStore = useFeatureStore()
   
   
   const messageHandler = (e) => {
     // 通过origin对消息进行过滤，避免遭到XSS攻击
     if (e.origin !== 'http://127.0.0.1:8080') {
       parseData({})
       return
     }
   
     if (typeof e.data === 'string') {
       parseData(e.data)
     }
   }
   
   const parseData = (data) => {
     try {
       iframeParentInfo.value = JSON.parse(data)
       console.log('父页面传输过来参数', data)
     } catch (error) {
       // console.log('解析JSON出错', error)
       iframeParentInfo.value = { isIframeParent: false }
     }
     // 存储数据
     featureStore.getFeatureInfo(iframeParentInfo.value)
   }
   
   onMounted(() => {
     // 获取 父向 子(iframe) 传递的信息
     window.addEventListener('message', messageHandler)
   
     // 子(iframe)向父传递信息
     window.parent.postMessage('Hello Parent!', '*')
   })
   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
   38
   39

6. 取全局定义的数据值

   import { useFeatureStore } from '@/stores'
   
   const { featureInfo } = toRefs(useFeatureStore().$state)
   
   console.log('获取到存储featureInfo的值', featureInfo)
   1
   2
   3
   4
   5

三、 关于pinia中的响应式

可以参考链接 Vue 3 & Pinia 状态管理（3） - Pinia State 的相关使用

四、备注

在 Vue3 中，如果你使用 window.open 打开新的页面，那么新的页面将会是一个全新的环境，它无法访问到原页面的内存数据，包括 Pinia 存储的数据。

如果你需要在新页面中使用到某些数据，你可以：

• 通过 URL 参数传递。这种方式适合传递简单的数据，但不适合传递大量或复杂的数据。

let routeUrl = $router.resolve({
  path: '/featureInfo',
  query: {
    ...formDraftInfo,
    featureId: String(id),
    featureVersionId: String(versionId),
    type: 'add',
  },
})
window.open(routeUrl.href, '_blank')
1
2
3
4
5
6
7
8
9
10

• 将数据存储到服务器或本地存储（如 localStorage、sessionStorage、IndexedDB 等），然后在新页面中从服务器或本地存储获取数据。这种方式适合传递大量或复杂的数据，但需要考虑数据的安全性和存储空间的限制。
  // 在原页面中

localStorage.setItem('data', JSON.stringify(data))

// 在新页面中
let data = JSON.parse(localStorage.getItem('data'))
1
2
3
4

请注意，以上两种方式都无法直接使用 Pinia 存储的数据，因为 Pinia 存储的数据只存在于原页面的内存中。