The concept of sharing states between components in Vuejs

Seeking advice on the optimal approach for implementing shared states between components in Vuejs.

Consider scenario A: a web app displaying a modal with a boolean state show. This state should change when the modal's OK button is clicked, as well as when any part of the background is clicked, or in response to a server-pushed state change. Thus, both the modal and the parent app need to be able to update this shared state.

Scenario B: a web app containing input fields within different components that share a common data value. If a user modifies the value through one component's field, it should also reflect in the other component. Furthermore, both should update in response to a server push event.

Queries:

  • Is employing vuex the recommended method? Should the shared state be a store field observed and modified through emitted actions by all components/parents needing access?

  • Could using vuex introduce complex reactivity similar to that seen in platforms like Meteor? How would you manage this potential issue?

  • What is the best strategy for documenting the flow and dependencies between components?

vue.jsreactive-programmingvuejs2vuex

Answer №1

A: To create a modal component, I suggest making the show attribute a prop. This way, the parent component can easily manage when the modal is displayed or hidden without sharing any state.

The modal itself doesn't need to interact with the server. It simply checks the value of the show prop to determine whether it should be visible or not.

In my opinion, the mask layer should be considered part of the modal. When the user clicks on the mask, the modal can emit an event that the parent component can listen for in order to decide whether to close the modal or keep it open.

If you're looking for an official Vue modal example, you can check out this resource: https://v2.vuejs.org/v2/examples/modal.html

B: Simply bind the vuex state directly to the inputs - there's no issue with that approach.

Keep in mind that not all components need direct access to the vuex store. For purely presentational UI components, utilizing props can offer more flexibility and control to the parent components.

I recommend checking out the following resources:

These are React / Redux docs. While the Vue community documentation may be less extensive, both Vue and React operate on the principles of component-based design, so the concepts remain similar.

For a practical example using vuex, you can refer to this chat application demo: https://github.com/vuejs/vuex/tree/dev/examples/chat

This demo showcases event emissions, pure UI components, and other mentioned techniques in action.

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

Authenticating Vue.js / Axios requests to an API route in Laravel: A step-by-step guide

I've been working with Laravel 5.6 and have successfully set up all my API routes, which are responding to requests from my REST client (Paw). Now, I want to create a basic front end to interact with these routes. In an effort to utilize Laravel&apos ...

laravelauthenticationvue.jsaxios

Using Vue.js, send information from an Ajax request to a Laravel controller for processing

As someone new to development, I have a little confusion with handling data from a multi-step form in an AJAX request on my controller. While I've been able to successfully collect all form inputs at once, I'm struggling to use the data from $req ...

javascriptvue.jsaxios

What steps can I take to prevent the [Vue warn]: Potential infinite update loop detected in a component render function issue in my VueJS project?

What are some tips to prevent an infinite update loop in a component render function using VUEJS? I have created a simple show password button with the following structure: <div class="mt-4 switchContainerGenPassword"> <div class="switchGene ...

javascriptvue.js

Attaching multiple elements to events in Vue.js

Can events be attached to multiple HTML elements without the use of components? Example: <ul> <li> <li> <li> <li> </ul> Is it possible to bind a click event to all <li> elements in this scenario? If so, ...

vue.js

Compare two arrays for equality in a Vue application

I'm stuck and could use some assistance. I currently have two arrays set up like this: let A = ['a', 'b', 'c'] let B = ['a', 'b', 'c'] I attempted to compare them without success: if(A === B ...

arraysvue.jsif-statement

Managing Radio Button Conditions in Vue.js

Is there a way to set conditions for radio buttons in Vue.js? I am trying to make the radio buttons dependent on a specific object that I select from the above codes. The "select" method works well and setting a value based on an object I choose using :val ...

vue.jsradio-button

The Vue.js input for checkboxes and radios fails to toggle when both :checked and @input or @click are used simultaneously

Check out this example on JSFiddle! <script src="https://unpkg.com/vue"></script> <div id="app"> <label> <input type="checkbox" name="demo" :checked="isChecked" @input=" ...

javascriptvue.jsfrontend

"Need to refresh localStorage in VueJS after navigating back with this.$router.go(-1)? Here's how

Below is my Login.vue code: mounted() { if (localStorage.login) this.$router.go(-1); }, methods: { axios.post(ApiUrl + "/login") { ... } then(response => { ... localStorage.login = true; this.$router.go(0); ...

javascriptvue.js

Guide on appending a file to a formData object in vue.js

Having trouble adding the file from the input to the formData object. Even after trying multiple solutions, the object appears to be empty when I log it. Can't seem to figure out what's wrong. File Input: <input class="btn btn-sm btn-rounded ...

javascriptvue.jsvuejs2

Exploring Vue.js: The Power of Components and Cache

After researching ways to 'cache' API fetched data in my application, I discovered that it can be easily achieved using localStorage or sessionStorage. Although it functions well, I am interested in consolidating all cached data into a single JS ...

vue.jscaching

Arranging elements in an array based on two different properties

Trying to organize an array of elements (orders details). https://i.stack.imgur.com/T2DQe.png [{"id":"myid","base":{"brands":["KI", "SA"],"country":"BG","status":&qu ...

javascriptarraysvue.jsgroup-by

vue Error: Attempting to access properties of an undefined object (specifically, 'NormalModule')

Working on a small web app written in vue, I utilize two different machines for testing and development. Github serves as a convenient platform for me to seamlessly switch between the two. Previously, I encountered no issues while working on my macos mach ...

vue.js

What is the best way to determine the count of results using a v-if statement?

Sorry for the possibly silly question, but I'm trying to figure out how to retrieve the number of results from my v-if statement within a v-for loop? This is what my code looks like: <div v-for="conv in conversation.hits" :key="conv ...

vue.jsvuejs2

Tips for successfully passing an image using props in Vuejs without experiencing the issue of disappearing content when there is no image present

Is there a way to make a component that can function with or without an image? Currently, when the component doesn't have an image, other contents and styles disappear. How can I resolve this issue? App.Vue: <template> <div id="app&qu ...

htmlcssvue.js

The Spring Boot application is having trouble retrieving static files

I started a fresh springboot project and organized the directory structure as follows: view image description here The yml configuration is outlined below: server: port: 8783 servlet: context-path: /spring-demo spring: scan : com.example appli ...

htmlspring-bootvue.js

What is preventing me from updating specific packages to the latest version using vue ui / npm?

Currently, I am utilizing Vue CLI and have been using the command vue ui to facilitate updating npm packages. Upon executing this command, I encountered a particular screen as displayed in the following image: https://i.stack.imgur.com/6cDlI.png I am see ...

vue.jsnpmpackagevue-cli

The v-navigation-drawer component in Vuetify 2 is not reappearing after setting dialog to false

I am utilizing the navigation drawer to display my data list in a dialog box. Everything works fine when I initially open it, however, upon reopening the dialog, the entire navigation drawer vanishes. The data GET operation is functioning correctly with no ...

vue.jsvuejs2vuetify.jsnavigation-drawer

Efficiently transferring a style property to a child component as a computed property in Vue.js

Currently, I am facing an issue that involves too much logic in my inline style, which I would like to move inside a computed property. While I understand that this is the correct approach, I am unsure of how to implement it. To provide a clearer understa ...

javascriptvue.jscomputed-properties

Adapting the visible outcome based on the second figure of a numerical value

Is there a way to automatically change the displayed value using a Vue filter when the last digit of the value falls within a specific range, such as 2-4? I am looking for a solution that can work for all possible intervals like (22-24, 32-34, 622-624... ...

vue.jsvue-filter

Trouble arises when incorporating a new feature onto a map with OpenLayers and Vue.js

I'm currently working on integrating a custom control into my map using OpenLayers with Vue.js. The Explore.vue component is responsible for creating the "map" (olmap) with OL, and I bind it to the child component LeftSideBar2.vue. However, when att ...

javascriptvue.jsopenlayers