Questions tagged [pinia]

Pinia is a JavaScript store library for Vue.js, its purpose is to share a state across components/pages.

659 questions
28
votes
5 answers

Nuxt 3 JWT authentication using $fetch and Pinia

I'm trying to do a JWT authentication to a distinct API. As @nuxtjs/auth-next doesn't seem to be up to date and as I read it was possible to use the new global method fetch in Nuxt 3 instead of @nuxtjs/axios (not up to date also), I thought it won't…
Claire
  • 773
  • 1
  • 8
  • 19
26
votes
3 answers

vue component doesn't update after state changes in pinia store

I'm currently working on my first vue application, currently building the login logics. For State management, pinia is being used. I created a Pinia Store to manage the "isLoggedIn" state globally. import { defineStore } from "pinia"; export const…
bjørn
  • 263
  • 1
  • 3
  • 4
23
votes
2 answers

Why Pinia vs Vuex for Vue 3?

I am a Vue.js developer who is coming up to speed with the the new features added to Vue 3, from Vue 2, namely the Composition API (added in Vue 3). For State Management, it appears that along with the release of Vue 3, the community is shifting…
Kobi
  • 4,003
  • 4
  • 18
  • 23
23
votes
5 answers

Vue: Can't access Pinia Store in beforeEnter vue-router

I am using Vue 3 including the Composition API and additionally Pinia as State Management. In the options API there is a method beforeRouteEnter, which is built into the component itself. Unfortunately this method does not exist in the composition…
Josh
  • 294
  • 1
  • 2
  • 11
21
votes
6 answers

How to set the type for the state object in pinia?

I'm making a chess game and I am using Vue 3 and TypeScript with Pinia for the state management. I want to do something like the following: export const useStore = defineStore("game", { state: () => { return { moves: [], gameBoard:…
avenmia
  • 2,015
  • 4
  • 25
  • 49
20
votes
6 answers

Can't use vue-router and pinia inside a single store

I am using pinia and vue-router 4.x ,but i am having a problem using both of them in a store. each works independently ,but not together. If i use import router from '../router' router will work but pinia is failed with error Uncaught…
SeyT
  • 773
  • 1
  • 10
  • 23
18
votes
2 answers

How to subscribe to a specific action in Pinia

Does anyone know if it's possible to subscribe to a specific action in Pinia? I know there's a way to subscribe to all actions like this: const subscribe = someStore.$onAction(callback, false) But that means I have to compare action name to the one…
Marek Miś
  • 259
  • 2
  • 8
14
votes
4 answers

Cannot find module 'pinia/dist/pinia.mjs' when using run dev

I setup Pinia on top of fresh Nuxt3 app and start dev server, with exactly these commands in order: npx nuxi init nuxt-app cd nuxt-app npm install npm install @pinia/nuxt npm run dev Dev server runs without any problem. Then, i put this line of…
Clarity
  • 186
  • 1
  • 7
14
votes
4 answers

Vue3 | Pinia - Watching storeToRefs in composable function does not work

I'm trying to understand the purpose of composables. I have a simple composable like this and was trying to watch state from a Pinia store where the watch does not trigger: import { ref, watch, computed } from "vue"; import { storeToRefs } from…
Riza Khan
  • 2,712
  • 4
  • 18
  • 42
13
votes
1 answer

Nuxt 3 - Pinia Vs useState()

Store (Pinia) Vs UseState If I am not mistaken, useState can replace any store like Pinia? Given that useState makes ref sharable across all components I have a hard time knowing if I should use a store or a useState ref. For instance, let's say I…
AhmadReza
  • 421
  • 6
  • 20
10
votes
1 answer

How to correctly handle information fetch from an API with Pinia in Vue.js 3?

I'm currently working on a project where to fetch data from an API. I need access to that data all over my app, so I thought that the best option was to use Pinia (usually I used Vuex, but I want to try this "new" store solution). My "problem" is…
yerigagarin
  • 137
  • 1
  • 1
  • 6
10
votes
3 answers

How to use Pinia outside a component in js file

I am migrating from vue 4.x to pinia, one of my file needs api key from store. But I can't make it work even though I follow the Pinia documentation . here is how I use pinia // Repository.ts import axios from "axios"; import { createPinia } from…
SeyT
  • 773
  • 1
  • 10
  • 23
9
votes
2 answers

how to reset one of data in pinia state?

I have a design in setting page,every one of them hava reset button, now i using pinia to be store library. I kown $reset is reset the whole pinia state,so,how to reset one of data in pinia state?
Zssaer
  • 193
  • 1
  • 2
  • 6
9
votes
2 answers

Pinia getter does not update

I have following code