在 Vue3 中的模板中使用 Pinia 操作可以给出
未捕获的类型错误：$setup.[storeName].[actionName] 不是函数
我做错了什么还是预期的行为？似乎没有其他人有同样的问题。谷歌搜索没有透露任何信息。
我正在使用新组件
太长了；博士
如何从参数化 getter 访问其他 getter？通常，您可以使用this.myGetter; 但是参数化的 getter 是作为箭头函数实现的，其中this是未定义的。在 Pinia 处理此案的首选方式是什么？
我想multiSum在我的 Pinia 商店中创建一个参数化 getter ( )，它访问另一个 getter ( sum)。
getter 可以通过 访问this，但是在用于实现参数化 getter 的箭头函数中不起作用：multiSum崩溃，因为this位于undefined嵌套箭头函数的上下文中。
getters: {
sum: (state) => state.a + state.b,
multiSum: (state) => (count) => this.sum * count // crash: this is undefined
}
在 Vuex 中，参数化 getter 可以通过参数而不是 来访问其他 getter this，这也适用于箭头函数。但据我所知，Pinia 中不存在此 API。
我可以通过捕获商店实例来解决这个问题：
multiSum(state) {
const store = this
return …我有一个反应值，我想将其存储在 pinia 商店中。
const data = ref({});
async function loadData() {
fetch("...")
.then((res) => res.json())
.then((json) => (data.value = json));
}
loadData();
const myDataStore = useMyDataStore();
const { myData } = storeToRefs(myDataStore);
// Here I want to store data in the store, reactively
myData.value = data.value;
但当我这样做时，反应性就会消失。如何将值存储在商店中，以便myData每次更新时data都会更新？
我正在使用pinia并且我想知道如何更新对象内的属性。我在 中有一个对象数组state.cart，其中是一些产品，它们都有一个名为 的属性quantity。该属性可以更改，因此我需要“更新”购物车数据。
这是我尝试过的：
state: () => ({
cart: []
}),
actions: {
updateQuantityOfProduct(product, val) {
const prod = this.cart.find((item) => item.id === product.id)
prod.quantity = val
this.$patch({
cart: this.cart,
})
},
}
但这似乎不起作用，因为购物车未更新和/或当我刷新时，尚未添加更新/更改（产品数量与更改前相同）
我该如何解决这个问题以及我做错了什么？
假设我有一个使用 Vue 3 的简单网上商店应用程序。每当用户将商品添加到购物车时，我都会将其存储在 Pinia 本地，并将此事件信息发送到后端。
默认情况下，我会向 Pinia 存储添加一个操作，例如addItemToCart()更新本地cartItems反应变量，并将请求发送到后端，例如POST http://localhost/api/update-cart.
我的想法是在我的应用程序中引入一个服务层。我会创建一个类似的服务：
const useCartService = () => {
const cartStore = useCartStore()
const updateCartApi = useUpdateCartApi()
const addItemToCart = async (item) => {
cartStore.loading = true
await updateCartApi.mutate(item)
cartStore.items.push(item)
cartStore.loading = false
}
return {
loading: cartStore.loading,
addItemToCart,
}
}
像这样将业务逻辑与 Pinia 商店分开有意义吗？它是否被视为一种反模式，或者这种方法在 Vue 中常用？
我正在尝试使用 package 来保留新 Nuxt 3 应用程序中变量的状态pinia-plugin-persistedstate。
我已经实施了nuxt 3指南中提供的步骤：
/plugins/persistedstate.ts文件。persist: true在商店文件中添加了选项。但什么也没发生。每当我刷新页面时，存储值就会丢失。
有人可以帮我理解这里的问题是什么吗？另外，如果有人使用过该软件包，请分享我在实施时可能缺少的步骤。
问题已更新
我正在尝试将Pinia的商店与使用Vue.js创建的 Web 组件一起使用，但控制台中出现以下错误：
[Vue 警告]：在 <HelloWorld.ce msg="message"> 处找不到注入“Symbol(pinia)”
我有一个非常简单的例子。
import { defineCustomElement } from 'vue'
import HelloWorld from './components/HelloWorld.ce.vue'
const ExampleElement = defineCustomElement(HelloWorld)
customElements.define('hello-world', ExampleElement)
import { defineStore, createPinia, setActivePinia } from "pinia";
setActivePinia(createPinia());
export const useCounterStore = defineStore('counter', {
state: () => ({
counter: 0,
}),
actions: {
increment() {
this.counter++;
},
},
});
<script setup lang="ts">
import { ref } from 'vue'
import { useCounterStore } from '../store.ts'
defineProps<{ msg: string …我将 Nuxt3 与 Pinia 结合使用。在 pinia 中，我有一个功能来授权用户，例如：
async login (credentials: User) {
var requestOptions = {
method: 'POST',
body: {
email: 'test@test.com',
password: 'testpass'
}
};
const { data: user }: any = await useFetch('https://endpoint.com/api/user/create-token', requestOptions)
console.log(user.value.result.token)
JwtService.saveToken(user.value.result.token)
},
当我从端点获得令牌时，一切正常。问题是; 我希望这个 fetch POST 在服务器上触发，而不是在客户端上触发。目前我在我的客户端中看到了 XHR。如何解决这个问题？
应用程序作为 SSR 运行。
我正在尝试设置vitest+，@vue/test-utils但我无法测试一些使用ref（Vue）或useCookie（Nuxt）的组件，我对 Pinia 也有同样的问题，我在 nuxt.config.js 中全局导入 2 个函数，如下所示
[
'@pinia/nuxt',
{
autoImports: ['defineStore', 'acceptHMRUpdate'],
}
]
这是我的 vitest.config.js 设置：
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import AutoImport from 'unplugin-auto-import/vite'
import path from 'path'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue'],
dirs: ['./composables/']
})
],
test: {
globals: true,
environment: 'jsdom',
coverage: {
provider: 'c8',
reporter: 'html',
reportsDirectory: './coverage'
},
resolve: {
alias: {
'~': path.resolve(__dirname, './')
} …在我的应用程序中，我正在努力存储用户表单响应。我创建了 pinia 商店并创建了每个表单对象。使用这个存储到我的组件中并将该存储的 getter 函数传递到变量中，
我将这个变量用作 v 模型。给出输入后也不会返回任何内容。我也没有收到任何错误。我是否遵循了任何错误的方法？
用户存储.js
import { defineStore } from 'pinia';
export const userResponses = {
formsResponses: {
form1: {
input1: '',
},
},
};
export default defineStore('userStore', {
state() { return userResponses; },
getters: {
getFormsInput: (state) => state.formsResponses.form1,
},
actions: {
setFormsResponses(formResponses) {
this.formsResponses.form1 = formResponses;
},
},
});
Form1.vue
<template>
<input type="text" name="input_form" v-model="input"/>
<button type="Primary" @click="submit">submit</button>
</template>
<script setup>
import { computed, ref } from 'vue';
import useUserStore from '@/store/userStore';
const userStore …