Exploring the functionalities of stores and props within the Vue onMounted lifecycle method

Question

Exploring the functionalities of stores and props within the Vue onMounted lifecycle method

As a newcomer to the Vue Composition API, I've run into some issues with functions like defineProps not being available. My current predicament involves receiving props from a parent component and wanting to store them in the "Pinia" storage after a series of calculations. Can anyone provide guidance on how to achieve this?

export default defineComponent({
  props: ['props'],
  setup() {
    const errorsStore = useErrorsStore();
   
    onMounted(() => {
      const processProps = (props) => {
        console.log(props);
        errorsStore.List.unshift(props);
        setInterval(processProps, 10000)
      }
      processProps(props);
    });
    return {
      errorsStore,
    };
  },
});

Your assistance on this matter would be greatly appreciated.

javascript vue.js vue-composition-api pinia vue-props

Answer 1

Answer №1

Avoid using Vue's predefined names like props for naming variables/props/events in Vue to prevent conflicts and confusion.

For example, I changed props: ['props'] to props: ['data']

Take a look at this simple example using Pinia

const { createApp } = Vue
const { createPinia, defineStore, storeToRefs } = Pinia

const useErrorsStore = defineStore('ErrorsStore', 
{
  state: () => {
    return {
      List: []
    }
  },
  actions: {
   add(data) {
      data && this.$state.List.unshift(data) 
    }
  }  
})

const MyComp = {
  props: ['data'],
  setup(props) {
    const store = useErrorsStore()        
    console.log(props);
    store.add(props.data);    
    return {    
      store
    }
  },
  template: '{{store.List}}' 
}

const App = {
  components: { MyComp },
  setup() {
    const store = useErrorsStore()
    return {
      store
    }
  }
}

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app">
  MyComp: <my-comp :data="{ item: 1 }"></my-comp>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6a0a3b3fbb2b3bbbf96e6f8e7e5f8e7e7">[email protected]</a>/lib/index.iife.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90e0f9fef9f1d0a2bea0bea3a0">[email protected]</a>/dist/pinia.iife.js"></script>

Answer 2

Avoid using Vue's predefined names like props for naming variables/props/events in Vue to prevent conflicts and confusion.

For example, I changed props: ['props'] to props: ['data']

Take a look at this simple example using Pinia

const { createApp } = Vue
const { createPinia, defineStore, storeToRefs } = Pinia

const useErrorsStore = defineStore('ErrorsStore', 
{
  state: () => {
    return {
      List: []
    }
  },
  actions: {
   add(data) {
      data && this.$state.List.unshift(data) 
    }
  }  
})

const MyComp = {
  props: ['data'],
  setup(props) {
    const store = useErrorsStore()        
    console.log(props);
    store.add(props.data);    
    return {    
      store
    }
  },
  template: '{{store.List}}' 
}

const App = {
  components: { MyComp },
  setup() {
    const store = useErrorsStore()
    return {
      store
    }
  }
}

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app">
  MyComp: <my-comp :data="{ item: 1 }"></my-comp>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6a0a3b3fbb2b3bbbf96e6f8e7e5f8e7e7">[email protected]</a>/lib/index.iife.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90e0f9fef9f1d0a2bea0bea3a0">[email protected]</a>/dist/pinia.iife.js"></script>

Exploring the functionalities of stores and props within the Vue onMounted lifecycle method

Answer №1

Similar questions

Guide on effectively clearing the context and canvas in three.js

saving numeric values and text to a document using node.js

Having trouble executing node commands in the terminal

When I bundle my project with Vite, the Styles seem to have disappeared

I have created a textbox with a button, but I am unsure of how to delete it

obtain data in JSON format from a Node.js server and display it on an HTML

The concept of position() is often mistaken for a function

Exploring the possibilities of integrating vuex into Vue 3

I'm looking for help on creating a three-column table using javascript/jquery. The table should display Product, Price, and Discount (which is calculated at 20%). Can anyone

The latest version of Next.js, 11.1.0, does not support monitoring for code changes within the node

Is it beneficial to rotate an image before presenting it?

The process of loading an image becomes stuck once the submit button is pressed

"Creating dynamic web apps with the powerful duo of Meteor and Zurb

Is there a way to execute two files concurrently in JavaScript using node.js?

The Recharts Line chart fails to display newly added data points when data is updated

"Enhance Your Website with Javascript: Combining and Incorpor

Preserve page configurations upon page refresh

Alignment of content layout across two wrapper elements

Steer clear of receiving null values from asynchronous requests running in the background

Utilize the keyboard's vertical arrows to adjust values as needed