主页 / coding / 问题 / 76986198
Accepted
VueFrontend
Asked: 2023-08-27 16:02:07 +0800 CST

当您单击按钮时，如何将 vuex 中的 getter 等同于 vue 2 中另一个组件中的变量？

  • 772

当您单击按钮时，如何从 vuex 发送一个操作并将数据属性之一与 vuex 的 getter 等同起来？

<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>

我的 Vuex：

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

在此组件中需要更改数据

<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>

在此组件中，当 pepson 单击按钮（在第一个组件中）时需要清理数据， this.selectedFloor need = ''

如何才能做到这一点？谢谢

vue.js

1 个回答

  1. Best Answer

    请看一下演示（您可以在第二个组件中观看 DATA_SELECTED getter）：

    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/[email protected]/dist/vuex.js"></script>
<div id="demo"></div>

    • 1

相关问题