Refresh the Vuex store using the main process of Electron

Is there a way to update a vuex store by committing changes from the main process? Here is an example:

In the main thread:

import store from '../store'

ipc.on('someevent', (event, args) => {
    // do something with args
    store.commit('update-things')
})

These modifications are then used to update components in the renderer.

Edit: Actual code:

main.js

import store from '../store'
const {ipcMain} = require('electron')
const WebTorrent = require('webtorrent')
const client = new WebTorrent()

ipcMain.on('addMagnet', (event, arg) => {
   client.add(arg, function (torrent) {
   var files = []
    torrent.files.forEach(function (file) {

    files.push({
        title: file.name,
        torrent: torrent.infoHash,
        index: torrent.files.indexOf(file),
        duration: '--:--'
    })
   })
  store.commit('addSongs', files)
})

The store mutation for adding songs is as follows:

addSongs (state, newSongs) {
    newSongs.forEach(function (song) {
      state.songs.push(song)
    })
}

The store is located in a different directory from main.js if that information helps.

The component that utilizes the store is:

**This component:

     <template>
      <div id="playlist">
        <div
          is="song"
          v-for="song in songs"
          v-bind:title="song.title"
          v-bind:torrent="song.torrent"
          v-bind:index="song.index">
    </div>
  </div>

</template>

<script>
import Song from './SongList/Song'

export default {
  name: 'playlist',
  components: { Song },
  computed: {
    songs () {
      return this.$store.getters.songs
    }
  }
}
</script>

Answer №1

Though this may seem like a dated subject, I would like to mention that there is a tool called vuex-electron which can be used to send dispatches to the store directly from the main thread.

For more information, you can visit the following link: https://www.npmjs.com/package/vuex-electron

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Delaying the call of a JavaScript function with jQuery

Basic JavaScript Function: $(document).ready(function(){ function sampleFunction() { alert("This is a sample function"); } $("#button").click(function(){ t = setTimeout("sampleFunction()",2000); }); }); HTML ...

Enable search functionality for jQuery Select2 values that have been formatted by a formatter function

Trying to use a formatter with select2 for better alignment of code and description elements, but the plugin seems to be searching based only on the description rather than the entire text. This may be because it's only looking at the original <opt ...

Ensure that the v-model in the function is reset in order for the v-tabs component to remain unhighlighted

Is there a way to reset the v-model when a specific value is selected? <template> <div id="app"> <v-app> <v-content> <v-tabs v-model="active_tab" slider-color="#F8940A" centered ...

Filling out a form within a webpage fetched through a DOMParser

Creating automation software in JavaScript using TamperMonkey. The script performs several AJAX requests that retrieve HTML to be parsed with a DOMParser. Is there a way to submit these forms without opening the newly retrieved HTML on the main page? ...

Can someone help me troubleshoot this issue with my code so that my website can open in a blank page using about:blank?

I'm currently facing an issue while trying to make one of the pages on my website open with an about:blank URL upon loading. Despite embedding the code in my index.html file, it doesn't seem to be functioning properly. Here's the code I&apos ...

The production build encountered an issue as it was anticipating 3 arguments, however, it only received

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'elipsis' }) export class ElipsisPipe implements PipeTransform { transform(text, length, clamp) { text = text || ''; clamp = clamp || '...& ...

MUI: The fontFamily property is not able to be overridden by nesting within the

My goal is to have different fonts for different parts of my application using theme nesting. Unfortunately, I discovered that theme nesting doesn't work when it comes to overriding fonts. In my App.js file: import React from "react"; impor ...

How can I limit auto-search results to a specific city in India on Google Maps?

How can we restrict autosearch to only Pune city in India? I attempted the following: autocomplete.setComponentRestrictions( {'country': ['in']},{'city':['Pune']}); ...

Combining elements from a string array to create a hierarchical object in JavaScript

I need assistance with merging values from an array into a predefined nested object. Here is an example of the array with values, ['name=ABC XYZ', 'hobbies=[M,N,O,P]', 'profession=S', 'age=27'] The object that needs ...

What is the method to combine multiple style values in vue.js?

Is there a way to create a div with a box shadow where the values can be changed using a slider? I am having trouble using more than one value stored in a data variable. Any suggestions on how to achieve this? <div :style="{ borderRadius: x_axis y_ ...

In ASP.NET, it is possible to only select a single checkbox at a time within a row in a GridView

I have a project where checkboxes are generated dynamically at runtime. I want users to be able to select only one checkbox at a time in each row. Here is my Gridview: <cc1:Grid ID="GrdWorkingCompany" runat="server" OnRowDataBound="GrdWorkingCompany_Ro ...

Tips for accessing payment details from a stripe paymentElement component in a React application

Here is a basic code snippet for setting up recurring payments in Stripe: await stripe ?.confirmSetup({ elements, confirmParams: { return_url: url, }, }) After browsing through the documentation and the internet, I have two unanswere ...

Insert JavaScript code into the head of the document (including the complete script code)

I am looking to insert a script in the head section of a website so that the target HTML appears as follows: <head><script type="text/javascript">*some code...*</script></head>. This particular script works perfectly: var head = d ...

Having trouble loading the Javascript file after redirection?

After a redirect in my ASP.NET Core web app, I noticed that my custom JavaScript file does not get loaded. It is included at the bottom of the _layout.cshtml page. <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/j ...

The sequence of Angular directives being executed

When multiple directives are applied to an element in AngularJS, what determines the order in which they will be executed? For instance: <input ng-change='foo()' data-number-formatter></input> Which directive, the number formatter ...

The play button on the iOS video player will be deactivated automatically after watching 15 videos

I have developed an application using the Ionic Framework that includes multiple videos for playback. To organize these videos, I created a category system where users can click on a video title to access the corresponding video player page. The video pla ...

Switching the chosen option in the <select> element repeatedly

I have successfully set the selected value, but now I am wondering how to keep changing it continuously. Initially, my approach was to remove the "selected" attribute from all options and then add it back to the desired option. Surprisingly, this method w ...

Adding additional rows to an Array Object in JavaScript based on a certain condition

I am faced with a scenario where I have an array object structured as follows [ { id: 123, startdate: '2022-06-05', enddate: '2023-04-05' },{ id: 123, startdate: '2021-06-05', enddate: '2021-04-05' } ] The task at h ...

What steps should I take with my Android PWA manifest and service workers?

I created a web application that I want to prompt Android users to download when they visit. To build my service workers and manifest, I utilized PWA Builder which can be found at Now that I have the manifest file ready, should I simply upload it to the r ...

performing asynchronous iteration with HTTP PUT requests

I'm attempting to send multiple HTTP PUT requests to my server, but I am only able to successfully send one JSON object to the database. What could be missing in my code? var data1 = JSON.stringify(require('./abc.json')), data2 = JSON ...