Ont la modification de la variable sur le bouton cliquer, mais d'abord défini à l'aide de localStorage en vue

0

La question

J'essaye de configurer un bouton qui modifie une valeur de données dans la Vue mais aussi l'avoir définie à l'aide de localStorage initally. De cette façon, je peux l'avoir à garder le précédent état où il était avant d'un rafraichissement de la page. Ci-dessous le code que j'utilise et je suis capable de le faire fonctionner, mais savoir qu'il serait préférable d'utiliser le résultat de la section, mais qui n'ont pas été en mesure d'obtenir que cela fonctionne correctement.

Quelqu'un aurait-il savoir ce qui ne va pas?

Mon bouton est déclenché à l'aide de la méthode d'essai et la variable en question est 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

La meilleure réponse

1

Je vous suggère d'utiliser vuex avec vuex-persistedstate.

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

2021-11-24 06:23:20

Je ne peux pas utiliser persistedstate malheureusement. Est-il une alternative à obtenir que cela fonctionne avec calculée?
Arshavin123

Dans d'autres langues

Cette page est dans d'autres langues

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