Tiene cambios de variables en el botón haga clic en pero inicialmente se establece el uso de localStorage en vue

0

Pregunta

Estoy tratando de configurar un botón que cambia un valor de datos en Vue, pero también la tienen establecido el uso de localStorage inicialmente. De esta manera puedo tener es mantener el estado anterior en el que estaba antes de actualizar la página. A continuación está el código que estoy usando y yo soy capaz de conseguir que funcione, pero sé que sería preferible utilizar la calculada sección, pero no he sido capaz de conseguir que funcione correctamente.

Nadie sabe lo que va mal?

Mi botón se activa utilizando el método de la prueba y la variable en cuestión es 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

Mejor respuesta

1

Le sugiero que utilice vuex con vuex-persistedstate.

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

2021-11-24 06:23:20

Yo soy incapaz de usar persistedstate por desgracia. Hay una alternativa para conseguir que esto funcione con calculada?
Arshavin123

En otros idiomas

Esta página está en otros idiomas

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