Vue.js数据设置最佳实践，使用数据方法动态设置数据

Question

我创建了一个应用程序，它工作得很好，但我（我认为）在不适合做最佳实践的地方做一些事情。我有一个组件，我将这段代码用于我的数据方法：

    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;

Answer 1

首先，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 都没有用。 Getters 应该像 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 store 是空的，你的组件只需要设置默认值到这个状态，你可以这样做：

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,
        }
    },
  }
}

声明一个对您的状态变化做出反应的计算。如果状态为空，则您 return 默认值。如果状态被更新，那么计算也会更新并且 return 存储值。

Vue.js数据设置最佳实践，使用数据方法动态设置数据

Vue.js best practices in data settings, using data method to set data dynamically

ionic-framework

vue.js

vuex