uni-app 使用pinia mapActions出现的bug

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

uni-app 使用pinia mapActions出现的bug

开发环境 版本号 项目创建方式
Windows 23H2 HBuilderX

产品分类：uniapp/小程序/微信

示例代码：

const {
    bindPhone
} = mapActions(useUserinfo, ['bindPhone'])

调用 bindPhone 方法会报错 $pinia is not define，无法调用函数。useUserinfo().bindPhone()z则可以调用成功

这个问题在h5上同样存在。

但是如果使用options 语法则可以正常调用，不会出现这个报错

```javascript
methods: {
            ...mapActions(useUserinfo, [ 'bindPhone']),
        },

this.bindPhone()可以正常调用


### 操作步骤：

随便搞一下就行

### 预期结果：

无法调用

### 实际结果：

正常调用

### bug描述：

```javascript
const {
    bindPhone
} = mapActions(useUserinfo, ['bindPhone'])

调用 bindPhone 方法会报错 $pinia is not define，无法调用函数。useUserinfo().bindPhone()z则可以调用成功

这个问题在h5上同样存在。

但是如果使用options 语法则可以正常调用，不会出现这个报错

```javascript
methods: {
            ...mapActions(useUserinfo, [ 'bindPhone']),
        },

this.bindPhone()可以正常调用


Harmonyos Next教程
1 回复

在uni-app中使用Pinia进行状态管理时，如果遇到mapActions相关的bug，通常可能是由几个常见原因引起的。以下是一些可能的代码案例和解决方法，帮助你定位和解决问题。

1. 确保正确安装和配置Pinia

首先，确保你已经正确安装并配置了Pinia。在uni-app项目中，你可以通过以下方式安装Pinia：

npm install pinia --save

然后在main.js或main.ts中配置Pinia：

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

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

2. 使用mapActions的正确方式

假设你有一个store文件store/index.js：

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  },
  state: () => ({
    count: 0
  })
})

在你的组件中使用mapActions：

<template>
  <div>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { mapActions, computed } from 'vue'
import { useMainStore } from '@/store/index'

export default {
  setup() {
    const store = useMainStore()
    const { increment, decrement } = mapActions(store, ['increment', 'decrement'])
    const count = computed(() => store.count)

    return {
      increment,
      decrement,
      count
    }
  }
}
</script>

3. 解决可能的bug

  • 确保mapActions正确映射：检查mapActions的调用是否正确，确保传递的store和action名称无误。
  • 检查Pinia版本：有时候bug可能是由于Pinia的某个版本引起的，尝试更新到最新版本。
  • Console调试：在setup函数中添加console.log来调试store的状态和action，确保它们被正确调用。
console.log(store.count) // 检查初始状态
increment()
console.log(store.count) // 检查调用action后的状态

如果上述方法仍然无法解决问题，可能需要更详细地检查错误消息和调用栈，以便进一步定位问题。在某些情况下，查阅Pinia的官方文档或社区论坛也可能提供额外的帮助。

回到顶部