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

Question

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

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

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

Answer 1

我建议您将vuex与vuex-persistedstate一起使用。

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