在按钮单击时进行变量更改,但最初在 vue 中使用 localStorage 设置

Posted

技术标签:

【中文标题】在按钮单击时进行变量更改,但最初在 vue 中使用 localStorage 设置【英文标题】:Have variable changes on button click but initially set using localStorage in vue 【发布时间】:2022-01-02 13:41:55 【问题描述】:

我正在尝试设置一个按钮来更改 Vue 中的数据值,但也最初使用 localStorage 设置它。这样我可以让它保持页面刷新之前的状态。下面是我正在使用的代码,我能够让它工作,但知道最好使用计算部分,但无法让它正常工作。

有人知道出了什么问题吗?

我的按钮是使用测试方法触发的,有问题的变量是 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'));
            
        ,
   

【问题讨论】:

【参考方案1】:

我建议你使用vuexvuex-persistedstate

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

【讨论】:

很遗憾,我无法使用持久状态。有没有其他方法可以让它与计算一起工作?

以上是关于在按钮单击时进行变量更改,但最初在 vue 中使用 localStorage 设置的主要内容,如果未能解决你的问题,请参考以下文章

如何在按钮单击时更改地图元素的高度?

单击时如何更改按钮类?

如何在 Vue JS 中将更新的值从父组件发送到子组件?

单击时搜索栏正在更改位置

如何通过单击外部按钮在 agggrid 中动态更改样式?

单击vue js时更改td元素的颜色