how to equate a getter from vuex to a variable from another component in vue 2 when you click on the button?

Question

how, when you click on the button, an action was sent from vuex and equate one of the data properties with a getter from vuex ?

<template>
    <div id="app">
        <div class="btns">
            <button id="btn--send" @click="sendData">send data</button> 
            <button id="btn--clear" @click="cleanData">clean data</button> // This place
        </div>
     </div>
</template>

My Vuex:

export default {
    state: {
        dataSelect: ""
    },
    actions: {
        cleanData({commit}) {
            commit("clean")
        }
    },
    mutations: {
        clean(state) {
            state.dataSelect = ""
        }
    },
    getters: {
            DATA_SELECTED(state) {
            return state.dataSelect
        }
    }
}

In this Component need change data

<template>
    <div class="SelectFloors">
        <p id="title--choose">Выбранный этаж</p>
        <VueSimpleSelect
            @change="chooseFloor"
            :options="floors"
            v-model="selectedFloor"
            placeholder="Выберите этаж"
            class="sel__floor"
        />
    </div>
</template>

<script>
export default {
    name: "selectFloors",
    data() {
        return {
            floors: [
                {
                    label: 'floor 1',
                    value: 1
                },
                {
                    label: 'floor 2',
                    value: 2
                },
                {
                    label: 'floor 3',
                    value: 3
                },
            ],
            selectedFloor:''
        }
    },
    methods: {
        
    },
}
</script>

In this component need when pepson clicked in button (in 1st component) clean data, this.selectedFloor need = ''

how can this be done? Thank you

Answer 1

Please take a look at the demo (You can watch DATA_SELECTED getter in your second component):

const vuexdata = {
  state: {
    dataSelect: ""
  },
  actions: {
    cleanData({commit}) {
      commit("clean")
    },
    chooseFloor({commit}, payload) {
      commit("choose", payload)
    }
  },
  mutations: {
    clean(state, payload) {
      state.dataSelect = ""
    },
    choose(state, payload) {
      state.dataSelect = payload
    }
  },
  getters: {
    DATA_SELECTED(state) {
      return state.dataSelect
    }
  }
};

const store = new Vuex.Store(vuexdata);

const app = {
  name: 'app',
  methods: {
    ...Vuex.mapActions(['cleanData']),
  },
  template: `
    <div class="btns">
      <button id="btn--clear" @click="cleanData">clean data</button>
      <second></second>
    </div>
  `,
}
Vue.component('second', {
  template: `
    <div class="SelectFloors">
      <p id="title--choose">Выбранный этаж</p>
      {{ selectedFloor }}
      <select @change="chooseFloor(selectedFloor)" v-model="selectedFloor">
        <option v-for="(floor, i) in floors" :key="i">
          {{ floor.value }}
        </option>
      </select>
    </div>
  `,
  computed: {
    ...Vuex.mapGetters(['DATA_SELECTED']),
  },
  methods: {
    ...Vuex.mapActions(['chooseFloor']),
  },
  watch: {
    DATA_SELECTED(newVal) {
      this.selectedFloor = newVal
    }
  },
  data() {
    return {
      floors: [
        {label: 'floor 1', value: 1},
        {label: 'floor 2', value: 2},
        {label: 'floor 3', value: 3},
      ],
      selectedFloor: this.DATA_SELECTED
    }
  },
})
new Vue({
  el: '#demo',
  store,
  render: h => h(app),
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="   https://unpkg.com/vuex@3.1.3/dist/vuex.js"></script>
<div id="demo"></div>