uni-app Pinia存储库不能写在自定义工具里面再去setup的页面调用

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app Pinia存储库不能写在自定义工具里面再去setup的页面调用

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 iOS14
HBuilderX 正式
HBuilderX版本号 4.36
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 荣耀
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<script setup lang="ts">
import { ref } from "vue";
import { usePhotoDataListStore } from "@/store/photoStore";
const store = usePhotoDataListStore();
//import PhotoStoreUtils from "@/utils/storeUtils/PhotoStoreUtils";//只要把这段代码打开就白屏  
const title = ref("Hello");

function addPiniaData() {
const time = new Date();
const item = {
_id: time.getTime(),
name: "Pinia",
} as PhotoItem;
store.saveOrUpdatePhotoItem(item);
}
function queryPiniaData() {
const photoDataList = store.getUploadPhotoDataList();
console.log("queryPiniaData===photoDataList=", photoDataList);
}
function deletePiniaData() {
store.clearPhotoItems();
console.log("deletePiniaData===deletePiniaData=");
}
</script>

操作步骤：

  • 运行demo必现

预期结果：

  • 可以给pinia做封装

实际结果：

  • 封装后白屏

bug描述：

Pinia写的存储库，只能够直接在vue页面调用import { usePhotoDataListStore } from "@/store/photoStore"; const store = usePhotoDataListStore(); 如果我写一个封装方法，再在vue中调用，就会白屏，只是引入封装的类也会白屏


Harmonyos Next教程
1 回复

在uni-app中，使用Pinia进行状态管理时，通常我们会在页面的setup函数中直接调用Pinia的存储库（store）。但如果你希望在自定义工具中封装一些逻辑，然后在页面的setup中调用这些封装好的逻辑，你可以考虑将Pinia的store作为参数传递给这些自定义工具函数。

下面是一个如何在自定义工具中封装逻辑并在setup中调用的示例。

1. 安装并配置Pinia

首先，确保你已经安装了Pinia并在uni-app中进行了配置。

npm install pinia

在你的main.js或main.ts中：

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

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

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

2. 定义一个Pinia Store

在stores文件夹下创建一个userStore.js：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
  }),
  actions: {
    updateName(newName) {
      this.name = newName;
    }
  }
})

3. 创建自定义工具函数

在utils文件夹下创建一个userUtils.js：

export function printUserName(store) {
  console.log(`User Name: ${store.name}`);
}

export function updateAndPrintUserName(store, newName) {
  store.updateName(newName);
  console.log(`Updated User Name: ${store.name}`);
}

4. 在页面中使用自定义工具函数

在你的页面组件中，如Pages/index/index.vue：

<template>
  <view>
    <button @click="printCurrentUserName">Print User Name</button>
    <button @click="updateAndPrintNewUserName">Update and Print User Name</button>
  </view>
</template>

<script>
import { useUserStore } from '@/stores/userStore'
import { printUserName, updateAndPrintUserName } from '@/utils/userUtils'

export default {
  setup() {
    const userStore = useUserStore()

    const printCurrentUserName = () => {
      printUserName(userStore)
    }

    const updateAndPrintNewUserName = () => {
      updateAndPrintUserName(userStore, 'Jane Doe')
    }

    return {
      printCurrentUserName,
      updateAndPrintNewUserName
    }
  }
}
</script>

这样，你就可以在自定义工具中封装逻辑，并在页面的setup函数中调用这些封装好的逻辑，同时保持对Pinia存储库的访问。

回到顶部