在這個計數器中，我想將數字保存在 localStorage 中，告訴我錯誤是什么，為什么它沒有保存在記憶體中
const app = Vue.createApp({
data() {
return {
counter: 0,
};
},
methods: {
getItem() {
localStorage.setItem('count', this.counter);
return localStorage.getItem('count');
},
},
}).mount('#app'); <div id="app">
<h2>{{getItem()}}</h2>
<button @click="counter--">-</button>
<button @click="counter "> </button>
</div>uj5u.com熱心網友回復：
這里的問題是每當頁面加載時，你呼叫getItem()你 reset localStorage.count = 0 因為它會自動初始化為 0。
相反，請執行以下操作：
const app = Vue.createApp({
data() {
return {
counter: localStorage.getItem('count') || 0,
};
},
watch: {
counter() {
localStorage.setItem('count', this.counter);
}
},
methods: {
getItem() {
return localStorage.getItem('count');
},
},
}).mount('#app');
這樣，您將初始值設定為存盤中的值；并觀察該值的變化，然后更新localStorage以反映整個視窗中存盤的正確值。
uj5u.com熱心網友回復：
此解決方案應該適合您：
這是一個改進的版本：
在這個解決方案中，我使用了一個三元運算子，它首先詢問計數器屬性是否存在于本地存盤中，如果不存在，那么計數器將使用值 0 進行初始化，如果計數器存在，則獲取該值并將該值決議為 int 值本地存盤中的所有值都保存為字串。
因此，如果您對值求和，則字串將執行以下操作：
步驟： 1
counter = '0';
步驟： 2
counter
在此步驟中，計數器將決議為 Integer 但仍為 0；
相反，如果你按照我的編碼
步驟： 1
counter = parseInt('0');
步驟： 2
counter ，第一次的計數器將為1
由于此代碼適用于 vuejs 版本 3，因此該代碼段將不起作用
const app = Vue.createApp({
data() {
return {
counter: localStorage.getItem('count') ? parseInt(localStorage.getItem('count')) : 0,
};
},
watch: {
counter(newQuestion, oldQuestion){
localStorage.setItem('count', newQuestion)
}
},
}).mount('#app');<div id="app">
<h2>{{counter}}</h2>
<button @click="counter--">-</button>
<button @click="counter "> </button>
</div>uj5u.com熱心網友回復：
使用計算屬性。所以你不需要方法、觀察者或資料
const app = Vue.createApp({
computed: {
counter: {
get() {
return localStorage.getItem('count') || 0
},
set(val) {
localStorage.setItem("count", val)
}
}
},
}).mount('#app');
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/473069.html
標籤：javascript Vue.js