Search code examples
vuejs3pinia

Is it possible to get the value of a pinia store outside of a vue application

I have a small Vue web component which utilises Pinia. The app is a small form which is embedded into a larger HTML form. When the user submits the form, i need to get a saved variable in the Pinia store and send it off with the other values from the form.

Is there any way of accessing the Pinia store from another JavaScript file not directly associated with the Pinia store or vue project?

Solution

  • Accessing the state of a Pinia store directly from an external JavaScript file is not recommended. This weakens the purpose of state management and could lead to unexpected issues.

    However, if it's necessary, you could set the Pinia store as a global variable and access it from the external JavaScript file.

    First, in the file where you create the Pinia store, set the store as a global variable:

    import { createPinia } from 'pinia';

// Create a new store
const store = createPinia();

// Set the store as a global variable
window.globalStore = store;

export default store;

    Then, you can access the store from the external JavaScript file through the global variable:

    // Access the store from an external JavaScript file
const store = window.globalStore;

// Now you can access the store's state
console.log(store.state.yourVariable);

    However, this approach is not advised, and it's better to use the Pinia store from a Vue component. If you find it necessary, you could set the state of the store as a property of the document object and access it from the external JavaScript file:

    // In your Vue component
mounted() {
  document.myStoreValue = this.$store.state.yourVariable;
}

// In your external JavaScript file
const value = document.myStoreValue;