当您单击按钮时,如何从 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 需要 = ''
如何做到这一点? 谢谢你
请看一下演示(您可以在第二个组件中观看 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',
computed: {
...Vuex.mapGetters(['DATA_SELECTED']),
},
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>