时间戳

首页 > 解决方案 > 如何在 Vue.js 的 value.sync 语句中引用存储变量

vue.js - 如何在 Vue.js 的 value.sync 语句中引用存储变量

问题描述

好的，所以我有一个 Vuex 商店来管理我页面上的下拉内容。我目前正在处理的页面有两组三个相同的下拉列表，它们的行为应该完全相同。一个在模式上，另一个在主页上。所以我做的是这样的：

this.$store.commit('setModule', 'manageSchedules');
this.$store.commit('setModule', 'manageSchedulesModale');

每个商店都有以下内容：

// These are arrays with the lists' content
sites
Profiles
Employees 

//These are the actual value of each of my list

CurrentSite
CurrentProfile
CurrentEmployee

我的问题是我希望我的列表的值与我的 vuex 商店的相应“currentXXX”同步。通常，我会选择类似的东西：

:value.sync="currentXXX"

但是，我在任何地方都找不到如何在 value.sync 语句中准确引用商店。有人可以帮我吗？

标签： vue.jsvuex

解决方案

好的，Ricky 是对的，使用带有 getter 和 setter 的计算属性完美地工作，他的链接为我提供了我需要的所有信息。本质上，这就是我现在拥有的：

<template lang="pug">
    .modal(v-if="popupShown", style="display:block", v-on:click="hideModalSafe")
        .modal-dialog.modal-lg(v-on:keydown.enter="syncSchedule()")
            .modal-content
                h3.modal-header {{moment(currentSchedule.start).format('YYYY-MM-DD')}}
                    button.close(type="button",v-on:click="popupShown=false") &times;
                .modal-body
                    .row
                        .col.form-group
                            label(for="schedule-start") {{__('Start')}}
                            k-input-time(:date.sync="currentSchedule.start")
                        .col.form-group
                            label(for="schedule-end") {{__('End')}}
                            k-input-time(:date.sync="currentSchedule.end")
                        .col.form-group
                            label(for="schedule-pause") {{__('Pause')}}
                            k-input-minutes(:minutes.sync="currentSchedule.pause")
                    .row
                        .col.form-group
                            label(for="schedule-site-id") {{__('Site')}}
                            k-combobox(model="modSites", context="selection", 
                            :value.sync="currentSiteMod")
                        .col.form-group
                            label(for="schedule-profile-id") {{__('Profile')}}
                            k-combobox(model="modProfiles", context="selection", 
                            :value.sync="currentProfileMod")
                        .col.form-group
                            label(for="schedule-employee-id") {{__('Employee')}}
                            k-combobox(model="modEmployees", context="selection", 
                            :value.sync="currentEmployeeMod")
                .modal-footer
                    .btn.btn-danger.mr-auto(v-on:click="deleteSchedule()")
                        k-icon(icon="delete")     
                        |  {{__('Remove')}}
                    .btn.btn-primary(v-on:click="syncSchedule()", tabindex="0") {{__('Save')}}
</template>


export default {
    ......
    computed:{
        currentSiteMod:{
            get(){
                return this.$store.state.manageSchedulesModale.currentSite;
            },
            set(value){
                this.$store.dispatch("manageSchedulesModale/updateCurrentSite", value);
            }
        },
        currentProfileMod:{
            get(){
                return this.$store.state.manageSchedulesModale.currentProfile;
            },
            set(value){
                this.$store.dispatch("manageSchedulesModale/updateCurrentProfile", value);
            }
        },
        currentEmployeeMod: {
            get(){
                return this.$store.state.manageSchedulesModale.currentEmployee;
            },
            set(value){
                this.$store.dispatch("manageSchedulesModale/updateCurrentEmployee", value);
            }
        }
    }
}

再一次，Vue.js 的魔力给我留下了深刻的印象。在使用计算属性之前，我被大量的 ajax 调用和 promise 纠缠不清，这些调用和承诺不断来回，产生不一致的结果。现在，商店的价值得到了完美的更新，并且列表做出了相应的反应，而我不必担心大量的参数。

无论如何，可能有几件事我没有做对。我知道我可能应该定义 getter 而不是直接访问该属性，但就目前而言，它可以工作并且我的客户很高兴（我也很高兴）。

推荐阅读