标签: pinia

我正在使用 OptionsAPI 和 Pinia Store 构建一个 Vue 3 应用程序，但我经常遇到一个问题，指出我试图在createPinia()调用之前访问该商店。

我一直在按照文档使用 Pinia 商店外部组件，但也许我没有以正确的方式做事。

情况如下：

我有一个登录屏幕 ( /login)，其中有一个 Cognito 会话管理器，我单击一个链接，完成 Cognito 的注册过程，然后重定向到主路由 ( /)，在此路由中，我还有一个子路由，显示一个Dashboard组件，其中我进行 API 调用。

在组件上Home，我使用以下方式调用存储useMainStore()，然后在从 Cognito 重定向后使用 URL 上的信息更新状态，然后我想在Dashboard.

这是我的Home组件，它本身工作得很好，因为我想象在创建 Pinia 实例后总是调用的钩子const store = useMainStore();内部。mounted()

<template>
  <div class="home">
    <router-view></router-view>
  </div>
</template>

<script>
import {useMainStore} from '../store/index'

export default {
  name: 'Home',
  components: {
  },
  mounted() {
    const store = useMainStore();

    const paramValues = …

我正在进行会话 API 调用main.js，并使用响应中的值作为根存储的初始值。在 vuex 中它的处理方式如下：

DataService.getSession()
  .then((sessionData) => {
    new Vue({
      i18n,
      router,
      // this params sessionData.session will be passed to my root store
      store: store(sessionData.session),
      render: (h) => h(App),
    }).$mount('#app');
  })

消耗像，

export default function store(sessionData) { // here I'm getting the sessionData
  return new Vuex.Store({
    strict: process.env.NODE_ENV !== 'production',
    state: {
      // some states here
    },
  });
}

对于 Pinia，我们正在创建一个应用程序实例并使其使用如下： app.use(createPinia())

我的商店会是这样的，

// how to get that sessionData here
import { defineStore } from 'pinia'

export …

我有一个使用如下设置语法创建的 pinia 商店：

defineStore('id', () => {
  const counter = ref(0)
  
  return { counter }
})

使用设置语法一切都运行良好，因为我可以重复使用其他 pinia 商店。

然而，现在我发现需要在其他页面上重新使用 Pinia 商店，但需要重置它们的状态。

例如，在 Vuex 中，我使用registerModule和unregisterModule来实现拥有一个新鲜商店。

所以问题是：如何使用设置语法重置 pinia 存储？

注意：该$reset()方法仅针对使用对象语法定义的存储实现，因此这不是一个选项。

注 2：我知道我可以通过创建一个函数来手动完成此操作，在该函数中将所有状态值设置为其初始值

注3：我找到了$dispose，但它不起作用。如果 $dispose 是答案，那么它如何重置两个组件之间的存储？

我从这个视频中学习了一些 cypress：https://www.youtube.com/watch? v=03kG2rdJYtc 我对他在 29:33 说的：“程序化登录”很感兴趣，但他正在使用 vue2 和 Vuex。

我的项目是用Vite创建的，状态管理是Pinia。那么如何使用 pinia 操作进行编程登录呢？

例如，欢迎登录的用户应该看到仪表板：

describe('Welcome', () => {
  it('logged in user should visit dashboard', () => {
    // login
    cy.visit('/')
    cy.url().should('contain', '/dashboard')
  })
})

还有我的用户商店：

export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    username: ref(useLocalStorage('username', null)),
  }),
  getters: {
    isLoggedIn: (state) => state.username !== null,
  },
  actions: {
    login(username, password) {
      return useAuthLoginService(username, password)
        .then((response) => {
          this.username = response.username
        })
        .catch((error) => {
          return Promise.reject(new Error(error)) …

有没有办法从同一商店中的另一个操作调用 Pinia 商店操作？例如，我有这样的 Pinia 商店：

export const useCounter = defineStore({
    id: 'counter',

    state: () => ({
        counter: 0
    }),

    actions: {
        addOne() {
            this.state.counter++
        },
        addTwo() {
            // Can i call here addOne action?
            // Things like this not working:
            this.addOne();
            this.addOne();
            // This is not working too:
            this.actions.addOne();
            this.actions.addOne();
        }
    }
});

我可以在 addTwo 中调用 AddOne 操作吗？

I\xc2\xa0 有一个 pinia 商店，其中有一个用户对象。

export const useStore = defineStore('store', {\n  state: () => ({\n    currentSlide: 1,\n    user: {},\n    data,\n  }),\n})\n

vote I\xc2\xa0am 然后更新它以在用户对象内有一个数组

然后投票数组有多个对象作为投票..所以 I\xc2\xa0 将数组作为 a ，user.vote然后采用这种格式[{vote:01},{vote:02}.{vote:3}]

我\xc2\xa0需要将此数组推送到mongodb..但是当我\xc2\xa0尝试访问此数组时，因为它是反应数据，所以它是一个代理对象，其中包含多个代理对象。

所以我尝试了toRaw(user.vote)（不确定这是否是正确的方法）并且数组不再是代理而是常规数组..但是它内部的对象（投票）仍然是代理对象..

我如何\xc2\xa0从这个 pinia 结构中获取包含常规对象的常规数组以发送到 mongodb？

是否可以使用 Pinia 将数据本地存储在 IndexedDB 中？

我尝试使用 Pinia 持久状态，它默认将数据本地存储在 LocalStorage 中。我只是想尝试一下它是否可以与 IndexedDB 一起使用，因为它具有更大的容量。

我收到此错误：未捕获错误：[]：在没有活动 Pinia 的情况下调用 getActivePinia。您是否忘记安装 pinia？\nconst pinia = createPinia()\napp.use(pinia)\n这将在生产中失败。\nat useStore (pinia.mjs:1691:19)\nat PokemonDetails.vue:3:22

我的代码有什么问题吗？

口袋妖怪详情：

<script>\nimport { usePokemonStore } from '../stores/PokemonStore';\nconst pokemonStore = usePokemonStore();\nexport default {\n  name: 'PokemonDetails',\n  methods: {\n    evolutions() {\n      return [\n        pokemonStore.evolutionOne,\n        pokemonStore.evolutionTwo,\n        pokemonStore.evolutionThree,\n      ];\n    },\n    resetApp() {\n      this.$router.push('/');\n      pokemonStore.$reset();\n    },\n  },\n};\n</script>\n\n<template>\n  <template v-if="pokemonStore.findPokemon == false">\n    <div class="firstDiv">\n      <div class="secondDiv">\n        <div>\n          <strong>{{ pokemonStore.pokemonName }}</strong\n          ><img :src="pokemonStore.selfie" alt="foto de pokemon" />\n          <p>Elemento Principal: {{ pokemonStore.type }}</p>\n        </div>\n        <div>\n          <strong>Habilidades:</strong>\n          <ul>\n            <li v-for="stat in pokemonStore.stats[0]">\n              {{ stat.stat.name }}: …

太长了；博士

如何从参数化 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的商店与使用Vue.js创建的 Web 组件一起使用，但控制台中出现以下错误：

[Vue 警告]：在 <HelloWorld.ce msg="message"> 处找不到注入“Symbol(pinia)”

我有一个非常简单的例子。

1. 主要.ts

import { defineCustomElement } from 'vue'
import HelloWorld from './components/HelloWorld.ce.vue'

const ExampleElement = defineCustomElement(HelloWorld)
customElements.define('hello-world', ExampleElement)

2. 商店.ts

import { defineStore, createPinia, setActivePinia } from "pinia";

setActivePinia(createPinia());

export const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 0,
  }),

  actions: {
    increment() {
      this.counter++;
    },
  },
});

3. HelloWorld.ce.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useCounterStore } from '../store.ts'

defineProps<{ msg: string …