标签: pinia

通常我使用命名空间 vuex。但我决定退出vuex，因为Pinia有 vue 核心团队的支持。我认为这对以后的发展比较有利。现在我正在使用模块化方法创建商店，但无法真正理解如何在打字稿项目上处理该部分。

假设我有一个user界面。

interface User {
  email: string,
  username: string,
}

export default User;

我正在store/modules/state.ts调用类型并创建用户状态。

import User from "../../types/User"

export const state = () => {
  return {
    user: {} as User | null,
  };
}

我store/modules/index.ts应该导入状态。然后将namespace: true其导出到 pinia 商店的 DefineStore() 中。

import {state} from "./state"

export default {
  namespace: true,
  state,
}

在store/index.ts

import {defineStore} from "pinia"
import {data} from "./modules"

export const Store …

我创建了一个商店来使用用户资源，并且该商店具有一系列角色。我想做的是搜索该数组中的特定角色。我尝试使用数组函数，但它不适用于 PropType<T[]>。

import router from "@/router";
import axios from 'axios';
import { defineStore } from "pinia";
import { PropType } from "vue";
import { ApplicationConstants } from '../utils/Constants';

type Role = {
    name: string;
}

export const useUserStore = defineStore('user', {
    state: () => ({
        currentUserId: Number,
        currentUserUsername: String,
        currentUserRoles: Array as PropType<Role[]>,
        isLoggedIn: false
    }),
    getters: {
        getCurrentUserId: (state) => state.currentUserId,
        getCurrentUsername: (state) => state.currentUserUsername,
        getCurrentUserRoles: (state) => state.currentUserRoles,
        isUserLoggedIn: (state) => state.isLoggedIn,
        // hasCurrentUserRole: (state) => { return …

我正在尝试使用 Pinia 来管理我正在构建的 Vue.js 应用程序中的某些全局状态，特别是我想在各种组件和视图之间共享 Socket.io 实例。不过我得到了

this.socketObject.emit is not a function

从 Socket.io 实例调用函数时，当我从创建 Socket.io 实例的组件/视图以外的组件调用函数时，会出现错误。以下是代码的一些摘录。

@/views/ LobbyView.vue（这是我创建 Socket.io 实例并将其传递给 Pinia 存储的位置，我可以在该文件中使用emit Fine，不会出现任何错误）

import io from "socket.io-client";
import { useSocket} from "@/store/index";
    ...     
setup() {
   const socketObject = useSocket();
   return { socketObject};
},
    ...
async mounted() {
   this.socketObject = await io("http://localhost:8000");
   this.socketObject.emit("createNewRoom");
}

@/store/ index.js Pinia商店

import { defineStore } from "pinia";
...
export const useSocket = defineStore({
  id: "socket",
  state: () => {
    return {socketObject: Object};
  }, …

我正在使用 Typescript、Pinia 和 Vue3，并且有一个MenuButton组件，我希望能够传递用于菜单打开状态以及显示/隐藏操作的 Pinia 存储。应用程序中有几个不同的菜单，因此我希望能够将它们传入，并且它们都使用相同的工厂来定义商店。我正在尝试找出如何让所有这些都与打字稿一起使用。

// nav.store.ts\n\nimport { defineStore } from "pinia";\nimport { useStorage } from "@vueuse/core";\nimport type { RemovableRef } from "@vueuse/core";\n\nexport interface MenuStore {\n    isOpen: RemovableRef<boolean>,\n    toggle(force?: boolean) : void,\n    open(): void,\n    close(): void,\n}\n\ninterface State {\n    isOpen: RemovableRef<boolean>;\n}\n\nfunction menuStoreFactory(id: string) {\n    return defineStore(id, {\n        state: () : State => ({\n            isOpen: useStorage(`${id}-open`, false),\n        }),\n\n        actions: {\n            toggle(force?: boolean) {\n                this.isOpen = force != undefined ? force : !this.isOpen;\n            },\n\n            open() {\n                this.isOpen = true;\n …

目前我正在做类似的事情来导入组件中的商店

import { useSomeStore } from "~/store/someStore";
const store = useSomeStore();

我想要实现的是跳过导入并仅使用商店

我所做的是添加

// nuxt.config.ts
modules: [
  [
    "@pinia/nuxt",
    {
      autoImports: ["defineStore", "acceptHMRUpdate"],
    },
  ],
],
imports: {
  dirs: ["stores"],
},

在我的 nuxt 配置中，但我仍然得到 useSomeStore is undefined，在这种情况下我做错了什么？

商店：

// store/someStore.ts
export const useSomeStore = defineStore("some-store", {
  state: () => ({ hello: "there" }),
});

自 nuxt 3.4.0 更新以来，pinia 存储不能再在可组合项中使用。

//example composable
import { useAuthStore } from '~/store/auth-store';
const authStore = useAuthStore();

export function doSomethingWithStore() {
  return authStore.checkAuthUser;
}

您现在将收到以下错误

getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.

请参阅 stackblitz 示例 https://stackblitz.com/edit/broken-pinia-store-in-composeables?file=composables%2FthisBreaks.js,nuxt.config.ts

当我启动程序时，控制台打印“hasInjectionContext”不是由“node_modules/vue-demi/lib/index.mjs”导出，而是由“node_modules/pinia/dist/pinia.mjs”导入。在../node_modules/pinia/dist/pinia.mjs:6:9。

我尝试删除node_module并将pinia版本更改为2.0.36。但它不起作用。我该如何改变？顺便说一句，我粘了另一个pinia版本为2.0.36的node_module也不起作用。

示例商店

  getters: {
    setName: (state) => (string: string) => {
      state.user.username = string;
    },
    setUser: (state) => {
      setName('Tom'); // setName is undefined.
    }
  }

有什么方法可以访问箭头函数内的 setName 吗？

示例仅显示您可以this进入正常函数 https://pinia.vuejs.org/core-concepts/getters.html#accessing-other-getters

我用来laravel-mix捆绑我的 Vue 3 和 Pinia 代码。我的app.js看起来像这样：

require('./bootstrap');

import { createApp } from 'vue'
import { createPinia } from "pinia";

const pinia = createPinia();
const app = createApp({});

app.use(pinia);
// ...
// ...
// ...
app.mount('#app');

我的 Vue 组件中的代码是基本的，与 Pinia 文档中的代码没有什么不同https://pinia.vuejs.org/introduction.html#basic-example

然而，即使laravel-mix成功编译并捆绑了所有内容，结果页面在浏览器控制台中显示此错误：

getActivePinia was called with no active Pinia. Did you forget to install pinia?
    const pinia = createPinia()
    app.use(pinia)
This will fail in production.

我正在尝试有一个 getter 来返回我的 pinia 商店的所有状态属性。

export const useFilterStore = defineStore('filterStore', {
    state : () : FilterState => ({
        variables:[] as string[],
        categories:[] as string[]
    }),


    getters: {
        getFilters: (state) => state
    },
    actions : {}
  });

通过这种方式，getFilters 引用自身，在不同情况下生成循环引用，如本组件所示

import { useFilterStore } from './store/filter-store.js'
export default {
  name: 'App',

  setup() {
    const filter = useFilterStore()
    JSON.stringify(filter.getFilters)  --> cyclic object value
  }
}

有没有办法直接为整个状态对象设置一个getter？

Imagine we have a Pinia setup store that implements a basic set of state, getters and actions:

export const useBaseStore = defineStore('base-store', () => {
  const name = ref<string>('');
  const age = ref<number>(1);
  const ageString = computed(() => `${name.value} is aged ${size.value}`)

  function doubleAge() {
    age.value *= 2;
  }

  return { name, age, ageString, doubleAge }
}

How can we extend or compose this store into further stores to reuse this set of state behaviours? For example

export const usePersonStore …