Apparently, using exported pinia-stores from npm packages doesn't work as expected. There seems to be an issue with either the context pinia is running in (and conflicts with the one of the consuming application) or the reactivity is somehow broken.
Steps to reproduce the bug
The reproduction contains multiple steps, as creating a local npm package and use it in your vue application as an import. Let's go through it step by step.
Create the local npm package
Using:
pinia@2.1.7
vite@5.2.11
@vue/reactivity@3.4.27
Start with the basic steps:
> mkdir pinia-package-test && cd pinia-package-test
Create a package.json that will take care of the module bundling, entry-point, etc. I use the following one:
That will create an output directory, containing all the relevant package files /build.
Since the package.json configuration points at that directory to get the entry file, we can safely continue with the next step: Create the application that will install the created pacakge.
Create the wrapper app
⚠️ For the ease of reproduction, have your npm-package directory pinia-test-package next to your newly created pinia-test-wrapper package, as following:
🆙 For the ease of testing, I removed theHelloWorld.vuecomponent and removed it's usage from theApp.vuecomponent.
Now, install pinia:
npm i -S pinia
Now, install your local npm package (the pinia-test-package that you have created in the first step):
npm i -S ../pinia-test-package
Assuming, that your directories (package & wrapper) are placed side-by-side, as described in the beginning of this section.
Install pinia in your main.js. Your main.js should look like this:
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
In your App.vue now import the package and use it. I implemented a simple counter-headline and two buttons to increment and decrement the counter value. Your App.vue might look like this:
The goal is to use the counter store-value that we defined in our pinia-package and use it's actions increment & decrement respectively. We want to interact with the pinia-stores count value by using it's defined actions.
Expected behavior
Clicking the buttons should update the pinia-store counter and increment/decrement the count state. Also the UI should update immediately and display the value correctly.
Actual behavior
When clicking the buttons, nothing happens. Here is a short video:
Notice, while inspecting the pinia store by using the vue-dev-tools (using the ones for chrome), the state does not get updated reactively, but only as soon as I reload the state within my dev-tools:
Reproduction
Apparently, using exported pinia-stores from npm packages doesn't work as expected. There seems to be an issue with either the context pinia is running in (and conflicts with the one of the consuming application) or the reactivity is somehow broken.
Steps to reproduce the bug
The reproduction contains multiple steps, as creating a local npm package and use it in your vue application as an import. Let's go through it step by step.
Create the local npm package
Using:
pinia@2.1.7
vite@5.2.11
@vue/reactivity@3.4.27
Start with the basic steps:
> mkdir pinia-package-test && cd pinia-package-test
Create a package.json that will take care of the module bundling, entry-point, etc. I use the following one:
I add a simple pinia store called
/src/counter.js
. Create your/src
directory and paste the following inside your/src/counter.js
file:For the
vite.config.js
I use the following configuration:Install the package dependencies:
npm install
Now build the package:
npm run build
That will create an output directory, containing all the relevant package files
/build
.Since the
package.json
configuration points at that directory to get the entry file, we can safely continue with the next step: Create the application that will install the created pacakge.Create the wrapper app
⚠️ For the ease of reproduction, have your npm-package directory
pinia-test-package
next to your newly createdpinia-test-wrapper
package, as following:For this, I am using a simple vite/vue3 application. Scaffolding it as the documentation points out:
npm create vite@latest pinia-package-wrapper -- --template vue
Then follow the instructions of the CLI:
cd pinia-package-wrapper
npm install
npm run dev
Now a dev-server will be running at port
5173
.🆙 For the ease of testing, I removed the
HelloWorld.vue
component and removed it's usage from theApp.vue
component.Now, install pinia:
npm i -S pinia
Now, install your local npm package (the
pinia-test-package
that you have created in the first step):npm i -S ../pinia-test-package
Assuming, that your directories (package & wrapper) are placed side-by-side, as described in the beginning of this section.
Install pinia in your
main.js
. Yourmain.js
should look like this:In your
App.vue
now import the package and use it. I implemented a simple counter-headline and two buttons to increment and decrement the counter value. YourApp.vue
might look like this:In the end, your app should look like this:
Explanation:
The goal is to use the
counter
store-value that we defined in our pinia-package and use it's actionsincrement
&decrement
respectively. We want to interact with the pinia-storescount
value by using it's defined actions.Expected behavior
Clicking the buttons should update the pinia-store
counter
and increment/decrement thecount
state. Also the UI should update immediately and display the value correctly.Actual behavior
When clicking the buttons, nothing happens. Here is a short video:
https://github.com/vuejs/pinia/assets/94853611/ac6727ae-fd70-42eb-9369-7d1a183e7033
Notice, while inspecting the pinia store by using the vue-dev-tools (using the ones for chrome), the state does not get updated reactively, but only as soon as I reload the state within my dev-tools:
https://github.com/vuejs/pinia/assets/94853611/78896107-c258-4100-9948-6ca4d053cc10
Additional information
I also tried using the
storeToRefs()
function that pinia provides, within myApp.vue
to destructure thecount
variable but it didn't help at all.