vuexでデータのstateの初期化するには

まずVueでは使用するプロパティをdataに宣言しておかなければなりません。
これはnullでは駄目で、配列として使う予定なら、空でいいので配列を入れておく必要があります。

data () {
    users: []
}

vuexでも同様です。

const state = {
    users: []
}

export default = {
    state
}

データの初期化方法

createdが便利ですが、ページが切り替わることに呼び出されるので、一度だけ初期化したい場合はフラグを立てるなどの工夫が要るかもしれません。

created: functino () {
    if (this.hasUsersRestored) {
        return
    }

    let restoreUsers = state.getStoredUsers() // ここでDBなどに保存したデータを取得
    for (let i = 0, i < restoredUsers.length; i++) {
        state.users.push(restoredUsers[i])
    }
    this.hasUsersRestored = true
}

gettersを利用する方法もあります。
同様にフラグなどで管理しないとgetterが呼び出されるたびに

getters: {
    users: state => {
        if (this.hasUsersRestored) {
            return state.users
        }
        let restoreUsers = state.getStoredUsers() // ここでDBなどに保存したデータを取得
        for (let i = 0, i < restoredUsers.length; i++) {
            state.users.push(restoredUsers[i])
        }
        state.hasUsersRestored = true
    }
}

usersの配列に1つずつ入れている理由は、配列を丸ごと置き換えてしまうと、リアクティブでなくなるからです。
(たぶん、他に良い方法があると思います。)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です