标签: pinia

我正在开发一个使用 vue 和 firebase 的网站。在身份验证部分之后，用户进入仪表板，其中有他的项目列表，这些项目是 firestore 中用户文档的子集合。

我创建了一个 pinia 存储来管理这些数据，每次使用表单创建项目或删除项目时，都会state.projects使用新的项目数组进行更新，这些项目会循环显示视图中的列表。

在视图中，我可以访问store.projects应该是反应性的吸气剂，但当我添加或删除项目时，视图中没有任何反应，但仍然会state.projects更新。

这是DashboardView.vue的代码：

 <template>
  <MainHeader mode="dashboard" />

  <main class="main">
    <div class="main__container">
      <section class="main__section">
        <div class="section__header">
          <h1 class="header__title">Projects</h1>
          <!-- <TextInput type="text" placeholder="Search" v-model="filter" /> -->
        </div>
        <div class="section__content">
          <ul class="content__list">
            <li
              v-for="project in projects"
              :key="project.id"
              class="content__item"
            >
              {{ project.id }}
              <!-- <router-link
                :to="{ name: 'ProjectView', params: { id: project.id} }">
              </router-link> -->
              <SimpleButton @click="deleteProject(project.id)" type="button" text="delete" />
            </li>
          </ul>
        </div>
        <div class="section__footer">
          <form @submit.prevent="createProject">
            <TextInput …

我正在使用 pinia 来管理我的 Vue3 应用程序的状态。这里已经进行了深入的讨论，将 pinia 存储分解为单独的文件，如状态、吸气剂、动作。但我正在寻找一种更“稳定”和“优雅”的解决方案来将 pinia 存储分解为单独的文件。

我使用 Pinia 在 Nuxtjs 3 中创建数据。它工作正常，但我想检查数据是否通过服务器而不仅仅是客户端呈现。我如何确定这一点？新版本的 Nuxtjs 3 是否支持 nuxtServerInit？

这里有这家商店：

interface Task {
  id?: string;
  name: string;
  done: boolean;
}

interface TodoState {
  tasks: Task[];
  loading: boolean;
}

export const useTodoStore = defineStore({
  id: 'todo',
  state: (): TodoState => ({
    tasks: [],
    loading: false,
  }),
  getters: {},
  actions: {
    async addTask(name: string): Promise<void> {
      this.loading = true;
      this.tasks.push({ name, done: false, id: generateID() });
      await sleep(200);
      this.loading = false;
    },
  },
});

我不明白为什么当我将鼠标悬停在操作中的“任务”时，其类型不是 Task[] 但我得到

(property) tasks: {
    id?: string | undefined;
    name: string;
    done: boolean;
}[]

如果需要的话，这是 stackblitz …

我正在实现一个身份验证存储（带有 firebase），并根据身份验证将我的用户路由到登录/记录页面。

我基本上试图完成此任务：https://github.com/dannyconnell/vue-composition-api-course/blob/module-23/vue-composition-api-noteballs/src/stores/storeAuth.js

但在打字稿中。

在我的 中main.ts，我确实将商店声明为财产：

const app = createApp(App);
const pinia = createPinia();
pinia.use(({ store }) => {
  store.router = markRaw(router);
});
app.use(pinia);
app.use(router);
app.mount('#app');

但是，在我的商店中，它仍然不知道我有一个路由器属性：

export const useStoreAuth = defineStore('storeAuth', {
    state: () => {
      return {
        user: {},
      } as AuthState;
    },
    actions: {
      init() {
        onAuthStateChanged(auth, user => {
          if (user && user.uid && user.email) {
            this.user = { id: user.uid, email: user.email };
            this.router.push('/'); //--> router doesn't exists
          } else {
            this.user …

我有一个 Vue3 应用程序，我想传达一种特定类型的 UX，其中对资源所做的更改会自动保存（即没有保存按钮）。该应用程序有几种不同类型的可编辑资源和几个不同的编辑器组件，我想创建一个可以处理自动保存并且可以简单地插入我的编辑器组件内部的抽象。作为附加要求，某些字段必须去抖（例如文本字段），而其他字段则要立即保存到服务器。

我有兴趣了解使用我在这里提供的解决方案可能存在哪些缺点以及是否有更好的方法。

想法：

• 创建一个多态类AutoSaveManager<T>来处理类型对象的自动保存T。
• 传递一个更新内存中本地对象的函数，该函数在该对象发生更改时调用（例如，绑定到该对象字段的输入元素发出更新）
• 传递更新远程对象（即数据库中的记录）的函数。例如，进行 API 调用的 Pinia 操作
• 将远程函数包装在需要去抖的字段的去抖器中，或者如果更新了无去抖字段，则立即刷新它。

类的代码：

/* eslint-disable @typescript-eslint/no-explicit-any */

import { debounce, DebouncedFunc } from "lodash";

type RemotePatchFunction<T> = (changes: Partial<T>) => Promise<void>;
type PatchFunction<T> = (changes: Partial<T>, reverting?: boolean) => void;
export type FieldList<T> = (keyof T)[];

enum AutoSaveManagerState {
    UP_TO_DATE,
    PENDING,
    ERROR,
}
export class AutoSaveManager<T> {
    instance: T;
    unsavedChanges: Partial<T>;
    beforeChanges: Partial<T>;
    remotePatchFunction: DebouncedFunc<RemotePatchFunction<T>>;
    localPatchFunction: PatchFunction<T>;
    errorFunction?: (e: any) => void;
    successFunction?: () …

我一直在尝试让我的 Pinia 商店在 Vue 3 中启动并运行，这一切都非常轻松，直到我想访问 url 中的一些参数。

我有一家商店（简化），如下所示：

import { defineStore } from 'pinia';
import { useRoute } from 'vue-router';
import { useLocalStorage } from '@vueuse/core';

export const useUserStore = defineStore('user', () => {
  const route = useRoute();
  const uuid = ref(
    useLocalStorage('uuid', route.params.id)
  )

 return { uuid };
})

不幸的是，该路线仍然未定义，就好像useRoute()没有正确触发一样。我已经看到您可以添加插件以在初始化时将路由器实例添加到 pinia 存储中，但我无法找到this在安装存储中访问该实例的方法。

任何帮助将不胜感激

Nuxt: 3.6.2
Pinia: 2.1.4
@pinia/nuxt: 0.4.11

在为 Pinia 定义 Nuxt 3 插件时，我需要访问 nuxtApp 上存在的 $pinia 实例。

该defineNuxtPlugin()函数传递参数nuxtApp. https://nuxt.com/docs/guide/directory-struct/plugins#creating-plugins

当我从该参数解构时（如此处$pinia的 pinia 文档所示），我收到以下类型错误：$pinia 的类型未知

但是当我调用useNuxtApp()该$pinia函数时defineNuxtPlugin()，我可以访问它。 $pinia 可通过 useNuxtApp() 获得

知道为什么我的 pinia 示例对我不起作用吗？

到目前为止，我已遵循 Nuxt 3 / Pinia 安装指南，如下所述： https: //pinia.vuejs.org/ssr/nuxt.html#installation

我无法让访问同一商店的多个组件响应更新，直到我弄乱 dom 元素来触发新的渲染。

在我的 Pinia 商店中，我有一个数组和一个更新方法：

    let MyArray: IMyItem[] = [
    { id: 1,
      name: "First Item",
    }, ....
    let SelectedItem = MyArray[0]
    const AddItem = ( n: string, ) => {       
        MyArray.push({ id: createId(), name: n, });
        };

    return { MyArray, SelectedItem, AddItem  }

在一个 Vue 组件中，我有文本输入和一个用于调用商店方法的按钮：

    function handle() {store.AddItem(name.value));

在另一个 Vue 组件中，在同一个父组件上，我使用 for 循环来显示允许选择项目：

    <div v-for="item in store.MyArray">
          <input type="radio"...

这些努力没有改变：

    const { MyArray } = storeToRefs(store);
    const myArray = reactive(store.MyArray);
    // also watching from both components...
    watch(store.MyArray, …

在Vue3编译API\xef\xbc\x8c中我通常不使用this

但 pinia 的例子是：

increment() {\n  this.counter++\n},\n

不想this在行动中使用。有什么建议吗？