Control between Vue components - Codes Helper - Programming Question Answer

Control between Vue components

there are two components, component An and component B, and there is a player in component A, and the playback and stop events of the player are added, which requires that multiple buttons of component B can also be clicked to allow the player of component A to play. and each click will pause the previous one and immediately play the next

.

A

 <img :src="start" alt="-sharp" @click="changestart" class="seta">


 changestart() {
      if (this.start == "../../static/pic/start.png") {
        this.start = "../../static/pic/stop.png";
        this.$refs.player.play();
      } else {
        this.start = "../../static/pic/start.png";
        this.$refs.player.pause();
      }

bclick
<li v-for="(songNamelist,songIndex) in songName" v-bind:key="songIndex" class="songlist" @click="songChoose(songIndex,"/play")">

    songChoose(songIndex,z) {
      this.$router.replace(z)
      this.isresearch = false;
      this.ishow=false;
      this.keyword="";
    },

there is an idea, because Vuex, clicks the B component button and uses mutation to submit and modify state.xxx=true,A components to find the parameter xxx=true of state and then perform playback, but the playback function does not know where to write


this.$refs.player.play()

cannot be written into created, because A has not been reloaded. I don"t know what to trigger when written to A"s methods. Watch has also tried. Xxx does not know where to set it to false,. Please give me a solution or an idea. Thank you very much.

Vuex vue.js javascript

Apr.08,2021

Let me give you a reference to the method I used before:
A component

    computed: {
        changeXxx(){
            return this.$store.state.xxx; 
        },
    },
    watch: {
        changeXxx(val){
            // 
            this.$refs.player.play();

            // xxxfalse
            this.$store.commit("updateXXX",false);
        },    
    },

vuex

updateXXX(state,val){
      state.xxx = val;
},

just write a custom events to handle it, subscriber mode, A listens for an event through events during initialization, and B initiates an event through events.

in theory, watch should be OK. When you change, call your own methods to change the state, and submit a mutation to change the xxx back.

is actually two methods of component communication

event bus
vuex

Previous: How to use input type= "file" to choose the path to download locally?

Next: How to set the number of words to display for a long column of data in element ui.

How is vuex used in vue stand-alone plug-ins? How does the vuex in the plug-in merge with the global vuex?
The problem with is that I have a vue plug-in (which uses vue install exports and can use plug-ins introduced by vue.use ()), and I want to use vuex to communicate between components in this plug-in. currently there are the following problems: what I...

Vuex vue.js javascript

Feb.28,2021
In vue cli, how do you listen to a variable and then operate accordingly?
for example, I am responsible for logging in and obtaining user information in the user.vue component. In the getInfo.vue component, the user logs in and requests the corresponding info interface to obtain the relevant information. so how can I trigge...

Vuex vue.js javascript

Mar.13,2021
The latest data from vuex is not available in setInterval.
when webapp steps back to the background, you want to use polling to simulate push. The value in setInterval has been changed to the value in store, but the latest value cannot be obtained in the next timer. What is the reason ...

Vuex vue.js javascript

Mar.18,2021
What if the value of getting state in Vue mutations is undefined?
I am learning that vuex has made a small demo to add a price to totatlPrice by clicking a button in the sub-component, and then display it. but the value that cannot be obtained from main.js mutations is obtained in main.js mutations. What should I do?...

Html vuex vue.js javascript

Mar.20,2021
Vuex keeps prompting [vuex] unknown mutation type: recruitmentArr
Code in main.js store.commit( recruitmentArr , recruitmentArr); Code in mutations.js import * as types from . mutation-types export default { [types.recruitmentArr] (state, val) { state.account = val } } Code in mutation-types....

Vuex vue.js javascript

Mar.25,2021
Webapp cannot be refreshed, and the data before and after the request is associated, and the latter data depends on the previous one. If the previous request fails, there will be a problem with the later display. How to break it?
in webapp development, I use vuex to save the previously requested data for later use. Later, I use this data to display the echart diagram. If the previous request fails, the later display is gone. Unlike the browser side, webapp can be refreshed manual...

Vuex vue.js javascript

Apr.02,2021
You can modify state? in the getters of vuex.
there is an array list, in store.state. I created a getList, in getters and then mapGetters the getList into a subcomponent. In this subcomponent, I forEach, the getList array and modify the value of item in it. I found that it seems that the list of al...

Vuex vue.js javascript

Apr.10,2021
Vue encountered a problem when making a shopping cart.
Thank you for your ideas. The number of additions made in vuex has been realized. The code has been updated to give reference to students who do not understand, and try the component again to achieve without vuex. the environmental background...

Vuex vue.js javascript

May.11,2021
Vue cannot read cookies at load time and load it into store of Vuex
problem description I am using Vue to develop the front end of an application. I want to use both store and cookies of vuex to save the user s login information. My implementation method is as follows: after the user logs in, save the user informatio...

Cookies vuex vue.js javascript

Jul.13,2021
The vuex state modifies one state value, and the other state value also changes?
go straight to the code: const tree = { state: { allNode: [], treeNode: null }, mutations: { SET_ALL_NODE: (state, keys) => { state.allNode = [...keys]; }, SET_TREE_NODE: (state, nodes) => { state.treeNod...

Vuex vue.js javascript

Aug.11,2021
Put the api data in vuex and refresh the page normally, then retrieve the interface data and store it in vuex, but it becomes empty?
I put all the data requested by the API in the vuex, which is normal all the time, but the data becomes empty when I refresh the page manually. Although the vuex is emptied every time I refresh the page, my API request operation and putting the requested...

Vuex vue.js javascript

Aug.17,2021
How to make a vue component instance correspond to a module in vuex?
I defined a vue component named ManagePage as a generic component for managing pages. The data and methods in the generic component are all mapped to state, actions, or mutations in vuex. Then, each management page (for example, the page that manages ve...

Vuex vue.js javascript

Dec.29,2021
The problem of splitting vuex action mutation module
vuex store module split this is what I wrote in store index.js import Vue from vue import Vuex from vuex import axios from axios import * as actions from . actions import mutations from . mutations import VuexPersistence from vue...

Vuex vue.js javascript

Jan.08,2022
Vue Project report Cannot read property 'type' of undefined "
widgets.mk v-for clickdispatch mutationsstate : vuextype : does anyone know what the problem is? Is it my data structure problem? ...

Vuex vue.js javascript

Mar.07,2022
Vue Project report Cannot read property 'type' of undefined "
widgets.mk v-for clickdispatch mutationsstate : vuextype : does anyone know what the problem is? Is it my data structure problem? ...

Vuex vue.js javascript

Mar.08,2022
Vue Project report Cannot read property 'type' of undefined "
widgets.mk v-for clickdispatch mutationsstate : vuextype : does anyone know what the problem is? Is it my data structure problem? ...

Vuex vue.js javascript

Mar.08,2022
Vue Project report Cannot read property 'type' of undefined "
widgets.mk v-for clickdispatch mutationsstate : vuextype : does anyone know what the problem is? Is it my data structure problem? ...

Vuex vue.js javascript

Mar.08,2022
Vue Project report Cannot read property 'type' of undefined "
widgets.mk v-for clickdispatch mutationsstate : vuextype : does anyone know what the problem is? Is it my data structure problem? ...

Vuex vue.js javascript

Mar.08,2022
Vue Project report Cannot read property 'type' of undefined "
widgets.mk v-for clickdispatch mutationsstate : vuextype : does anyone know what the problem is? Is it my data structure problem? ...

Vuex vue.js javascript

Mar.08,2022
Please tell me how to realize the data management state of vuex and the data localization of reused components.
my current scenario is like this. Because the project I m working on is complicated, and the page (component) I m working on is complicated, I use vuex. At present, all the data on that page and the status control of the pop-up window are placed on a m...

Vuex vue.js javascript

May.22,2022

Menu