Düğmeye tıklandığında değişken değişiklikleri yapın, ancak başlangıçta vue'da localStorage kullanılarak ayarlayın

0

Soru

Vue'da bir veri değerini değiştiren bir düğme kurmaya çalışıyorum, ancak yerel olarak localStorage kullanarak da ayarladım. Bu şekilde, bir sayfa yenilemeden önce bulunduğu önceki durumu tutmasını sağlayabilirim. Aşağıda ben kullanıyorum kodudur ve onu işe almak için ama hesaplanmış bir bölüm kullanmak için iyi olurdu ama düzgün çalışması için bunu elde etmek mümkün olmamıştır bilmek mümkün değilim.

Neyin yanlış gittiğini bilen var mı?

Düğmem test yöntemi kullanılarak tetiklenir ve söz konusu değişken isgrid'dir.

export default {
    data() {
        return {
            option: 'default',
        }
    },
    components: {
        FileUploader,
    },
    mixins: [
        visibilitiesMixin,
        settingsMixin
    ],
    props: {
        vehicleId: {
            type: Number,
            required: true,
            default: null,
        }
    },
    computed: {
        ...mapState([
            'isLoading',
            'images',
            'fallbackImageChecks',
            'selectedImages'
        ]),
        isGrid: {
            get() {
                return localStorage.getItem('isGrid');
            },
        },
        imagesVModel: {
            get() {
                return this.images;
            },
            set(images) {
                this.setImages(images);
            }
        },
        selectedImagesVModel: {
            get() {
                return this.selectedImages;
            },
            set(images) {
                this.setSelectedImages(images);
            }
        },
        removeBgEnabled() {
            return this.setting('nexus_integration_removebg_enabled') === 'enabled';
        },
    },
    mounted() {
        this.loadImages(this.vehicleId);
    },
    methods: {
        testing() {
            if (this.isGrid === 'false' || this.isGrid === false) {
                localStorage.setItem('isGrid', true);
                this.isGrid = true;
                console.log(this.isGrid);
                console.log(localStorage.getItem('isGrid'));
            } else {
                localStorage.setItem('isGrid', false);
                this.isGrid = false;
                console.log('b');
                console.log(this.isGrid);
                console.log(localStorage.getItem('isGrid'));
            }
        },
   }
html javascript nuxt.js vue.js
2021-11-24 06:14:17
1

En iyi cevabı

1

Kullanmanızı öneririm vuex ile vuex-persistedstate.

https://www.npmjs.com/package/vuex-persistedstate

2021-11-24 06:23:20

Ne yazık ki persistedstate'i kullanamıyorum. Bunu computed ile çalışmak için bir alternatif var mı?
Arshavin123

Diğer dillerde

Bu sayfa diğer dillerde

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................