我創建了一個應用程式，效果很好，但我（我認為）在不是最佳實踐的地方做事。我有一個組件，我將這段代碼用于我的資料方法：
data() {
var versionThing = "v1";
if(this.$store.getters.version !=''){
versionThing = this.$store.getters.version;
}
var settings = this.$store.getters.settings;
var checkboxesThing = [
{ val: "val1", text:"Text 1", isChecked: false },
{ val: "val2", text:"Text 2", isChecked: false },
{ val: "val3", text:"Text 3", isChecked: false },
];
if(settings.checkboxes != ''){
checkboxesThing = settings.checkboxes;
}
return {
settings: {
key: settings.key,
version: versionThing,
checkboxes: checkboxesThing,
}
};
},
這樣我可以檢查我的 VueX 商店中是否有輸入。但我有一種感覺，這可能不是正確的方法......
這是我的 VueX 代碼 index.js 檔案：
import { createStore } from 'vuex';
import { Storage } from '@ionic/storage';
const ionicStorage = new Storage();
ionicStorage.create();
const store = createStore({
state() {
return {
settings:{
key:"",
version:'',
checkboxes:"",
},
}
},
getters: {
key(state){
return state.settings.key;
},
version(state){
return state.settings.version;
},
settings(state){
return state.settings;
},
// Ionic/Storage getters
async getStorageAandoening(state){
const myAwesomeValue = await ionicStorage.get('key')
if(myAwesomeValue != ''){
state.settings.key = myAwesomeValue;
}
return state.settings.key;
},
async getStorageSettings(state){
const myAwesomeValue = await ionicStorage.get('settings');
var objectMyAwesomeValue = JSON.parse(myAwesomeValue);
if(objectMyAwesomeValue.key != ''){
state.settings = objectMyAwesomeValue;
}
return state.settings;
}
},
mutations: {
changeKey (state, payload) {
ionicStorage.set('key', payload)
state.settings.key = payload
},
changeVersion(state, payload){
ionicStorage.set('version', payload)
state.settings.version = payload
},
changeSettings(state,payload){
ionicStorage.set('settings', JSON.stringify(payload));
state.settings = payload;
}
},
actions: {}
}
);
export default store;
uj5u.com熱心網友回復：
首先，vuex 模塊狀態通常填充您期望的默認狀態。
state() {
return {
settings:{
key: "",
version: "v1",
checkboxes: [
{ val: "val1", text:"Text 1", isChecked: false },
{ val: "val2", text:"Text 2", isChecked: false },
{ val: "val3", text:"Text 3", isChecked: false },
],
},
}
},
但這取決于您，如果需要，您可以將其留空。
然后，您的大多數吸氣劑都沒有用。Getter 應該像 vue 組件中的“計算”一樣使用：它是從你的狀態派生的值，而不是快捷方式。我的意思是，它可以做到，但在我看來這是一個不好的做法。
如果您需要訪問您的 vuex 狀態，只需執行this.$store.state.settings.
最后，從您的 vue 組件點，您可以跳過將 vuex 存盤復制到組件資料的步驟。Vuex 應該是您資料的真實來源，因此復制它們只會使其無用，因為您可以在不通知 vuex 存盤的情況下更新組件中的資料（有時它可能很有用，但我覺得這不是您的情況）
<template>
<div>{{ $store.state.settings.version }}</div>
</template>
<script>
export default {
computeds: {
isLastVersion() {
return this.$store.state.settings.version === 'v2'
},
}
}
</script>
這就是我會為你的情況做的事情，即使我沒有全域圖景。
如果你真的需要你的 vuex 存盤為空，并且你的組件只需要設定默認值到這個狀態，你可以這樣做：
export default {
computeds: {
settings() {
const storeSettings = this.$store.state.settings
const defaultSettings = { version: 'v1', checkboxes: [...] }
return {
version: storeSettings.version || defaultSettings.version,
checkboxes: storeSettings.checkboxes || defaultSettings.checkboxes,
}
},
}
}
宣告一個對你的狀態變化做出反應的計算。如果狀態為空，則回傳默認值。如果狀態已更新，則計算的也會更新并回傳存盤值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/424044.html