标签: pinia

我目前正在开发我的第一个 vue 应用程序，正在构建登录逻辑。对于状态管理，正在使用 pinia。我创建了一个 Pinia Store 来管理全局的“isLoggedIn”状态。

import { defineStore } from "pinia";

export const useLoginStatusStore = defineStore('loginStatus', {
    id: 'loginStatus',
    state: () => ({
        isLoggedIn: false
    }),
    actions: {
        logIn() {
            this.isLoggedIn = true
            console.log("Login", this.isLoggedIn)
        },
        logOut() {
            this.isLoggedIn = false
            console.log("Logout", this.isLoggedIn)
        }
    }
})

到目前为止一切顺利，它工作正常，我可以访问组件和路由器文件中的状态和操作。

**<roouter.js>**

import { createRouter, createWebHistory } from 'vue-router'
import { createPinia } from 'pinia'
import { createApp, ref } from 'vue'
import { useLoginStatusStore } from '../stores/loginStatus.js'

import App from '../App.vue' …

我是一名 Vue.js 开发人员，正在了解从 Vue 2 添加到 Vue 3 的新功能，即 Composition API（在 Vue 3 中添加）。

对于状态管理来说，随着 Vue 3 的发布，社区似乎正在从使用 Vuex 转向 Pinia。

Pinia 与 Vuex 之间有什么区别？从概念上讲，Vue 2 到 Vue 3 发生了什么变化，使得 Pinia 更适合 Vue 3？

谢谢。

我正在尝试对不同的 API 进行 JWT 身份验证。

由于 @nuxtjs/auth-next 似乎不是最新的，而且据我所知，可以在 Nuxt 3 中使用新的全局方法 fetch 而不是 @nuxtjs/axios （也不是最新的），我认为它自己编写身份验证代码不会太难！但这对我来说仍然是个谜，我只找到了 Vue 项目的文档（使用 Pinia 来保持用户登录），我有点迷失了。

我想实现的目标：

• 包含电子邮件和密码的登录页面，登录请求发送到 API（编辑：完成！）
• 从 API 获取 JWT 令牌和用户信息（编辑：完成！）并存储两者（即使页面刷新也保持用户记录）
• 将 JWT 令牌全局设置为标头 $fetch 请求（？），这样我就不必将其添加到每个请求中
• 如果用户未登录，则不允许访问其他页面

对此有什么帮助吗？

这是我的 login.vue 页面（之后我必须使用 Vuetify 和 vee-validate，但还是一次一步！）

// pages/login.vue
<script setup lang="ts">
import { useAuthStore } from "~/store/auth";

const authStore = useAuthStore();

interface loginForm {
  email: string;
  password: string;
}

let loginForm: loginForm = {
  email: "",
  password: "",
};

function login() {
  authStore.login(loginForm);
}
</script>

<template> …

我正在制作一款国际象棋游戏，并使用 Vue 3 和 TypeScript 以及 Pinia 进行状态管理。

我想做如下的事情：

export const useStore = defineStore("game", {
  state: () => {
    return {
      moves: [],
      gameBoard:  getInitialBoard(),
      playerTurn: PieceColor.White,
      previousPieceSelected: undefined
    }
  },
    updatePreviousPieceSelected(piece: Piece | undefined ) {
      this.previousPieceSelected = piece
    }
  }
})

更新游戏状态.vue

setup() {
    const store = useStore()
    const previousPieceSelected: Piece | undefined = store.previousPieceSelected;
    let playerTurn: PieceColor = store.playerTurn;

    const initialGameState: GameState = {
      boardState: store.gameBoard,
      playerTurn,
    };

    const updateGameState = (
      cellRow: number,
      cellCol: number,
      currentPiece: …

我正在使用 pinia 和 vue-router 4.x ，但我在商店中使用它们时遇到问题。每个都独立工作，但不能一起工作。

如果我使用

import router from '../router'

路由器可以工作，但 pinia 失败并出现错误

Uncaught ReferenceError: Cannot access 'useAuthStore' before initialization
at axiosroot.ts

@line let authStore = useAuthStore(pinia);

//这里是axiosroot.ts

import axios from "axios";
import {useAuthStore} from '../stores/auth-store'
import { createPinia } from "pinia";
 const pinia=createPinia();
let authStore = useAuthStore(pinia);
const url = "http://127.0.0.1:8000/api";
const   myToken =authStore.getToken;
export default axios.create({
  url,
  headers:{"Accept":"application/json"},
  
});

当我从 vue-router 导入路由器时useRouter未定义

import {useRouter} from 'vue-router'
const router =useRouter();

错误

Uncaught TypeError: Cannot read properties …

我正在使用 Vue 3，包括 Composition API，另外还使用 Pinia 作为状态管理。

在选项 API 中，有一个方法 beforeRouteEnter，该方法内置于组件本身中。不幸的是，这个方法在组合 API 中不存在。这里，本来应该在 beforeRouteEnter 方法中的代码被直接写入 setup 方法中。但是，这意味着首先加载并显示组件，然后执行代码，如果检查失败，则组件将被重定向到错误页面等。

我的想法是直接在路由的 beforeEnter 方法中的路由配置中进行检查。但是，我无法访问 Pinia Store，尽管它之前在 main.js 中调用过，但它似乎尚未初始化。

控制台日志

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

路由器.js

import { useProcessStore } from "@/store/process";

const routes: Array<RouteRecordRaw> = [
{
    path: "/processes/:id",
    name: "ProcessView",
    component: loadView("ProcessView", "processes/"),
    beforeEnter: () => {
      const processStore = useProcessStore();
      console.log(processStore); …

我在新的 Nuxt3 应用程序之上设置 Pinia 并启动开发服务器，按顺序使用以下命令：

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm install @pinia/nuxt
npm run dev

开发服务器运行没有任何问题。然后，我将这行代码放入“nuxt.config.ts”中；

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm install @pinia/nuxt
npm run dev

而且，当我再次尝试连接到开发服务器时，它在终端中给出了以下错误消息：

 ERROR  Cannot start nuxt:  Cannot find module 'pinia/dist/pinia.mjs'                                                                     12:03:55
Require stack:
- C:\Users\user\Documents\github2\nuxt-app\index.js

有谁知道是否可以订阅 Pinia 中的特定操作？我知道有一种方法可以订阅所有操作，如下所示：

const subscribe = someStore.$onAction(callback, false)

但这意味着我必须将操作名称与回调中我想要的操作名称进行比较，如下所示：

websocketStore.$onAction(
  ({name}) => {
    if (name === 'specificAction') {
      console.log('do something')
    }
  }
)

所以我想知道是否有更好的方法？（我将 Pinia 与 Nuxt3 一起使用）

我试图理解可组合项的目的。我有一个像这样的简单可组合项，并试图从 Pinia 商店观看watch不触发的状态：

import { ref, watch, computed } from "vue";
import { storeToRefs } from "pinia";
import useFlightsStore from "src/pinia/flights.js";
import usePassengersStore from "src/pinia/passengers.js";

export function useFlight() {
    const route = useRoute();

    const modalStore = useModalStore();
    const flightsStore = useFlightsStore();
    const { selection } = storeToRefs(flightsStore);

    const passengersStore = usePassengersStore();
    const { passengers, adults, children, infants } =
        storeToRefs(passengersStore);

    watch([adults, children, infants], (val) => console.log('value changes', val))

Vue 组件中的相同功能按预期工作。

那么我们无法观察可组合项内的值？

Store (Pinia) 与 UseState

如果我没记错的话，useState可以更换任何商店吗Pinia？鉴于这useState使得 ref 可在所有组件之间共享，我很难知道是否应该使用 store 或 useState ref。例如，假设我有一个currentUser (firstName, lastName, email)在页面加载时从远程 API 获取的数据。我应该将此信息存储在PiniauserStore 中还是存储在useState('currentUser')?

该主题的最佳实践是什么？

useState() 文档： https: //v3.nuxtjs.org/api/composables/use-state

Pinia 文档： https: //pinia.vuejs.org/core-concepts/