Vue brothers components communicate with each other (vuex way)

Demand: In the Home (index.vue) called component A (componentA.vue), and component B (componentB.vue), want by clicking on the event the primary key of B, the component A of the triggering event

step:

1. Install vuex, performed npm install vuex --save code installed vuex

2. Import vuex in main.js file, as follows:

import Vue from 'vue'
import App from './App'
import router from './router'
import vuex from 'vuex'
Vue.config.productionTip = false
Vue.use(vuex)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3. Create a folder in the root directory: vuex, then add store.js file, store.js file code is as follows:

import vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const state={
    count:1
}

const mutations={
    add(state){
        state.count++;
    }
}

export default new Vuex.Store({
    state,mutations
})

4. A component and B component references in index.vue code is as follows:

<template>
  <div>
      <h1>组件A调用</h1>
      <compontentA></compontentA>
      <h1>组件B调用</h1>
      <compontentB></compontentB>
  </div>
</template>

<script>
import compontentA from './componentA'
import compontentB from './componentB'
export default {
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  components:{
    compontentA,
    compontentB
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

5. A component codes:

<template>
    <div>
        <h1>我是组件A</h1>
        {{$store.state.count}}
    </div>
</template>
<script>
import store from '@/vuex/store'
export default {
    data(){
        return{
            result:0
        }
    },
    created(){
     
    },
    store,
    methods:{
      watchstore(){
          alert("从B组件触发A组件");
      }
    },
    watch:{
      '$store.state.count':function(val){
         this.watchstore();
      }
    }
}
</script>
<style scoped>

</style>

Note that part of Miao Hong, monitor the status of the way and monitor other variables and methods are a bit different way, the code:

 '$store.state.count':function(val){
         this.watchstore();
      }

6. The component B code is as follows:

<Template> 
    <div> 
        <h1 of> I component b, component b events using control state to achieve the purpose of modifying the component A </ h1 of> 
        <Button @click = "$ store.commit ( 'the Add')"> operating state + 1'd </ Button> 
      
    </ div> 
</ Template> 
<Script> 
Import from Store '@ / vuex / Store' 
Export default { 
    Store, 
    Methods: { 

    } 
}
 </ Script> 
<style scoped> 

</ style >

The above steps can be achieved using the component B click event module A control method for an internal effect, only G and standardization malicious

Vue brothers components communicate with each other (vuex way)

Guess you like