Search code examples
vue.jsvuejs2frontendstorepinia

Why the stores pinia is not defined?


I'm expecting to return the store but I'm havin an error useUsersStore is not defined. Even though the pi nia store is corresctly stores and exported to th ecomponent.

https://stackblitz.com/edit/vitejs-vite-wg4uyx?file=src%2Fcomponents%2FFilters.vue,src%2Fstores%2FusersStore.js,src%2Fmain.js

  import { defineStore } from 'pinia';

    export const useUsersStore = defineStore('usersStore', {
      state: () => ({
      ...
      }}
      
      // Component 
      
      export default {
      setup() {
        const usersStore = useUsersStore();

        const countries = usersStore.getCountries;
        const scores = usersStore.getScores;

        const country = ref('');
        const score = ref('');
        
        etc.
        
        }}

// main.js

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const pinia = createPinia();
const app = createApp(App);

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


Solution

  • "I'm havin an error useUsersStore is not defined", Of course you will get the error, as you haven't imported it.

    Filters.vue

    <script>
    import { ref } from 'vue';
    
    // Add this import statement
    import { useUsersStore } from '../stores/usersStore';
    
    export default {
    ...