Majú premenlivé zmeny na tlačidlo ale spočiatku nastavená pomocou localStorage v vue

0

Otázka

Snažím sa nastaviť tlačidlo, že zmeny údajov hodnotu v Vue, ale majú tiež nastaviť pomocou localStorage initally. Tento spôsob, ako môžem mať to udržať predchádzajúceho stavu, v ktorom bol pred obnoviť stránku. Nižšie je kód používam a som schopný dostať sa do práce, ale viem, že by bolo vhodnejšie použiť vypočítaná časť, ale neboli schopní si, že pracovať správne.

By niekto vedieť, čo sa deje zle?

Môj tlačidlo je aktivované pomocou testovacej metódy a premenné v otázke je isGrid.

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

Najlepšiu odpoveď

1

Odporúčam vám použiť vuex s vuex-persistedstate.

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

2021-11-24 06:23:20

Nie som schopný používať persistedstate bohužiaľ. Je tu alternatívu, aby si to do práce s vypočítaná?
Arshavin123

V iných jazykoch

Táto stránka je v iných jazykoch

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