[Vuejs]-How to equate a getter from vuex to a variable from another component in vue 2 when you click on the button?

by

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>
👤Nikola Pavicevic

Leave a comment