在按钮单击时进行变量更改,但最初在 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】:我建议你使用vuex
和vuex-persistedstate
。
https://www.npmjs.com/package/vuex-persistedstate
【讨论】:
很遗憾,我无法使用持久状态。有没有其他方法可以让它与计算一起工作?以上是关于在按钮单击时进行变量更改,但最初在 vue 中使用 localStorage 设置的主要内容,如果未能解决你的问题,请参考以下文章