vue.js 如何正确地获取pinia存储的当前状态，以作为arg传递给aprc函数

uajslkp6 于 7个月前发布在 Vue.js

关注(0)|答案(1)|浏览(76)

这里我有一个来自pinia的简单计数器存储。计数器正常工作，在更新时将信息显示到页面上，但是，我使用计数的函数并没有获得计数器存储的更新状态。我如何正确访问更新的状态，以便将其传递给wagmi函数，该函数实际上是阅读更新的数字？

count.ts <-- pinia store*

export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
    count: 0
    }
  },
  actions: {
    increment() {
    return this.count++
    },
    decrement() {
      return this.count--
    }
  },
  getters: {
    getCount() {
      return this
    }
  }
});

字符串

page.vue*

<template>
    <div>
      <button @click="counterStore.increment">+</button>
        <p>{{ counterStore.count }}</p>
          <button @click="counterStore.decrement" :disabled="counterStore.count == 0">-</button>
         <button v-if="user.isConnected" @click="() => write()">Mint</button>
        <p v-else="" @click="user.connect">Connect Wallet</p>
    </div>
</template>

<script setup>
import { useCounterStore } from '#imports'
import { useContractWrite } from 'use-wagmi'
import { parseEther } from 'ethers';
import { useMyUserStore } from '#imports';

const counterStore = useCounterStore()
const user = useMyUserStore()

const { data, isLoading, isSuccess, write } = useContractWrite({
  address: '0x3E966c216fB0b92664DB70b4217AD15d470fe7AC',
    abi: [
  {
      inputs: [
        {
          "internalType": "uint256",
          "name": "amount",
          "type": "uint256"
        }
      ],
      name: "T2GMint",
      outputs: [],
      stateMutability: "payable",
      type: "function"
    }
  ],
  functionName: 'T2GMint',
  value: parseEther('0.015'),
  args: [counterStore.count], //counterStore.count is 0. Using getter function here breaks app
  account: user.address
})

</script>

型
使用像const currentCount = counterStore.getCount这样的getter函数会破坏应用程序。我已经阅读了很多关于pinia，nuxt和vue的信息，在这一点上，我知道我需要以某种方式阅读更新的状态，但我不确定最好或最简单的方法是什么。任何帮助都非常感谢。

vue.js

来源：https://stackoverflow.com/questions/77398080/how-to-properly-get-the-current-state-of-pinia-store-to-pass-as-arg-for-async-fu

1条答案

按热度按时间

4nkexdtk1#

商店是React性对象，因此您不能在保持React性的同时破坏它们的结构或传递单个属性。
解决方案是将状态转换为refs对象。对于普通的reactive对象，您可以使用Vue的toRefs(); Pinia提供了storeToRefs()，它只从存储中提取状态属性，忽略方法和非reactive属性。
文档中有一个例子：

import { storeToRefs } from 'pinia'

const store = useCounterStore()
// `name` and `doubleCount` are reactive refs
// This will also extract refs for properties added by plugins
// but skip any action or non reactive (non ref/reactive) property
const { name, doubleCount } = storeToRefs(store)
// the increment action can just be destructured
const { increment } = store

字符串
在您的情况下，您可以像以下方式之一一样使用它（当然，如果需要，可以导入它）。
具有对象上的属性：

const counterStore = useCounterStore()
const counterStoreRefs = storeToRefs(counterStore)

// ...

const { data, isLoading, isSuccess, write } = useContractWrite({
  // ...
  args: [counterStoreRefs.count]
  // ...
})

型
关于解构：

const counterStore = useCounterStore()
const { count } = storeToRefs(counterStore) // Renaming is supported, of course. E.g., { count: currentCount }

// ...

const { data, isLoading, isSuccess, write } = useContractWrite({
  // ...
  args: [count]
  // ...
})

型

赞(0）回复(0）举报 7个月前

我来回答

vue.js 如何正确地获取pinia存储的当前状态，以作为arg传递给aprc函数

1条答案

相关问题

热门标签

最新问答