标签: pinia

我正在从 vue 4.x 迁移到 pinia，我的文件之一需要来自商店的 api 密钥。但即使我遵循Pinia 文档，我也无法使其工作。这是我如何使用 pinia

// 存储库.ts

import axios from "axios";

import { createPinia } from 'pinia'
import { useAuthStore } from '../stores/auth-store'
const pinia=createPinia();
let authStore = useAuthStore(pinia);
const baseURL = 'http://127.0.0.1:5678/res-api';

export default axios.create({
  baseURL,
  headers:{"Authorization":"Bearer " + authStore.getToken,
"Accept":"application/json"},
  
});

预期结果：从商店获取令牌。

控制台错误

Uncaught ReferenceError: Cannot access 'useAuthStore' before initialization
    at Repository.ts:6:17
    

Note: this working inside a component 

我有以下代码

<script lang="ts">
import { RouterView } from "vue-router";
import defaultLayout from "@/layouts/default.vue";
import dashboardLayout from "@/layouts/dashboard.vue";
import { useDefaultStore } from "@/stores/default";
import "./index.css";
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    let { getLayout } = useDefaultStore();

    return { getLayout };
  },
  components: { defaultLayout, dashboardLayout },
});
</script>

<template>
  {{ getLayout }}
  <component :is="getLayout">
    <RouterView />
  </component>
</template>

当我到达/dashboard我的状态时会更新，但吸气剂由于某种原因没有更新，这是为什么？

<script setup lang="ts">
import { useDefaultStore } from "@/stores/default";
let { getUserData, SET_LAYOUT, …

我目前正在开发一个从 API 获取数据的项目。\n我需要访问我的应用程序中的所有数据，所以我认为最好的选择是使用 Pinia（通常我使用 Vuex，但我想尝试一下）这个“新”商店解决方案）。

我的“问题”是，我真的不知道我实现目标的方式是否是最好的方式，甚至是“良好的做法”。在我的 Pinia 商店里我写了这样的内容：

\nexport const listadoADPs = defineStore("listado", {\n  state: () => ({\n    adps: [],\n  }),\n  actions: {\n    getADPs() {\n      const api =\n        "URL";\n\n      fetch(api)\n        .then((response) => response.json())\n        .then(({ data }) => (this.adps = data))\n        .catch((error) => console.log(error));\n    },\n  },\n});\n

然后，在我的组件中我编写了以下代码：

<script setup>\nimport { ref, computed } from "vue";\nimport { listadoADPs } from "@/stores/adps";\nconst store = listadoADPs();\n\nconst cards = ref([\n  {\n    number: computed(() => store.adps.length),\n    description: "ADPs vigentes",\n  },\n  {\n    number: …

我在设置页面有一个设计，每个页面都有重置按钮，现在我使用pinia作为存储库。我知道$reset是重置整个pinia状态，那么，如何重置pinia状态中的数据之一呢？

如何获得更新嵌套属性的反应式组件：

我有一个 pinia 商店定义如下

import { defineStore } from "pinia"
export const useStore = defineStore({
    id: "poc",
    state: () => ({ str: "", nested: { obj: "" } }),
    persist: {
        enabled: true,
        strategies: [{ storage: localStorage }],
    },
})

以及以下 vue3 组件

<script lang="ts">
import { ref } from "vue"
import { storeToRefs } from "pinia"
import { useStore } from "./store"
export default {
    setup() {
        const store = useStore()
        const example = storeToRefs(store)

        const mStr = ref(example.str) …

我正在尝试设置 Nuxt3 与 Pinia 一起工作。

采取的步骤：

• 从一个活跃的 nuxt3 项目开始
• 跑npm install @pinia/nuxt
• 这失败了，出现依赖错误，所以重新运行npm install @pinia/nuxt --legacy-peer-deps，效果很好
• 将 pinia 添加到我的 nuxt.config.ts 中，现在看起来像：

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    meta: {
        link: [
            {
                rel: "stylesheet",
                href:"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
            }
        ],
      script: [
        { src: 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js', integrity: 'sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2', crossorigin: 'anonymous' }
      ]
    },
    ssr: false,
    buildModules: ['@pinia/nuxt'],
    base: '/',
})

• 重新启动服务器
• 出现以下错误：

GET http://localhost:3000/_nuxt/@id/pinia/dist/pinia.mjs net::ERR_ABORTED 404 (Not Found)

我一直在谷歌搜索，无法弄清楚这里出了什么问题......我尝试取出 nuxt.config.ts 中的“base”参数，但这也没有帮助。如果我取出 pinia 声明，一切都会正常。

设置：我使用 Nuxt3 + Pinia + VueUse。

目标： 我想通过 VueUse: 将 pinia 商店的状态保存到本地存储useStorage。

问题： 由于某种原因，本地存储中没有创建任何项目。我觉得我在这里错过了一些东西。在组件中我可以useStorage很好地使用。

在商店/piniaStoreVueUse.js

import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'

export const usePiniaStoreVueUse = defineStore('piniaStoreUseVue', {
    state: () => {
        return { 
            state: useStorage('my-state', 'empty'),
        }
    },
    actions: {
        enrollState() {
            this.state = 'enroll';
        },
        emptyState() {
            this.state = 'empty'; 
        },
    },
    getters: {
    }
});

在组件/SampleComponentStatePiniaVueUse.vue

<script lang="ts" setup>
    import { usePiniaStoreVueUse } from '~/stores/piniaStoreVueUse'; …

我正在使用 Vuejs 3、vuerouter 4 和 pinia，并尝试在某些路线中放置导航防护，按照文档中的示例（如果用户未经身份验证并且不在登录页面上，则将用户发送到登录页面获得身份验证）。关于在组件之外使用 pinia 的pinia 文档中也对此进行了解释。但我无法理解它。

我使用的商店目前很简单（返回 false 或 true isAuthenticated）：

//authStore.js
import { defineStore } from "pinia";

export const useAuthStore = defineStore( 'AuthStore', {

  state: () => {
    return {
      isAuthenticated: false
    }
  }

})

isAuthenticated我想在一个beforeEnter中使用这个routes/index.js

在 main.js 中：

import { useAuthStore } from '@/stores/authStore'
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import { createPinia } from 'pinia' …

我正在使用 vue 3 与合成 api 和 pinia

我有一个身份验证商店，它正在从商店读取默认电子邮件和默认密码

import { useAuthStore } from "stores/auth";
const authStore = useAuthStore();

const email = authStore.loginUser;
const password = authStore.passwordUser;

然后我使用电子邮件和密码作为v-model。

问题是两者都不是反应性的。如果我更改文本输入中的值，模型不会更新

我恳请对问题的解释和解决方案。

有没有办法从同一商店中的另一个操作调用 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 操作吗？